@saasquatch/mint-components 1.6.8-0 → 1.6.8-2

package/dist/esm/{sqm-big-stat_36.entry.js → sqm-big-stat_37.entry.js}

@@ -1,22 +1,21 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { j as h, u as useEffect, e as useState, k as d, d as useRef, b as browser, i as useReducer } from './stencil-hooks.module-6bde7453.js';
-import { i as intl } from './global-4bd89b1d.js';
-import { u as useCallback } from './use-callback-c5579ecb.js';
-import { i as isDemo, R, O, W, f as fn, F as Fe, _, x, d as dn, g as gn, l as Ve, M as Me, D as De, o as He, m as mn } from './index.module-5043fba6.js';
+import { m as h, u as useEffect, i as useState, o as d, j as useRef, b as browser, f as useReducer } from './stencil-hooks.module-b48b45ec.js';
+import { i as intl } from './global-0f137e54.js';
+import { u as useCallback } from './use-callback-051c06c6.js';
+import { i as isDemo, R, d as dist, O, W, f as fn, F as Fe, _, x, a as dn, g as gn, r as Ve, M as Me, D as De, t as He, c as mn } from './index.module-787e5d35.js';
+import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { a as useRequestRerender } from './re-render-a3c1732f.js';
-import { u as useChildElements } from './useChildElements-a68649fd.js';
-import './luxon-dccb73bb.js';
-import { d as dist } from './index-4bffa04c.js';
+import { a as useRequestRerender } from './re-render-54bb3e32.js';
+import { u as useChildElements } from './useChildElements-0124b1a9.js';
+import './luxon-1e38d7f1.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
-import './sqm-text-span-view-b03a3c6d.js';
-import { j as jsonpointer } from './jsonpointer-388a7082.js';
+import './sqm-text-span-view-2f7d6d14.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-97f39def.js';
-import { b as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, h as CheckboxFieldView, C as CopyTextView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-e57c3d40.js';
-import './sqm-portal-container-view-06bce80d.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-3c2c2f1b.js';
+import { b as useDemoBigStat, O as useBigStat, B as BigStatView, K as autoColorScaleCss, J as CardFeedView, j as CheckboxFieldView, C as CopyTextView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, Q as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, U as demoRewardExchange, k as RewardExchangeView, V as pathToRegexp, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-ca765d5e.js';
+import './sqm-portal-container-view-83b417f0.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -340,6 +339,18 @@ const CouponCode = class {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Coupon";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
     h(this);
   }
   disconnectedCallback() { }
@@ -359,6 +370,8 @@ function useDemoCouponCode(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -412,7 +425,7 @@ function DividedLayoutView(props, children) {
   `;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h$1("div", { class: sheet.classes.LayoutContainer },
+  return (h$1("div", { class: sheet.classes.LayoutContainer, part: "sqm-layout-container" },
     h$1("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -823,7 +836,7 @@ function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
-  return (h$1("div", { class: sheet.classes.Container },
+  return (h$1("div", { class: sheet.classes.Container, part: "sqm-hero-image-container" },
     h$1("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -831,7 +844,7 @@ function HeroImageView(props, children) {
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
     return (h$1("div", { class: sheet.classes.Background },
-      h$1("div", { class: sheet.classes.Overlay },
+      h$1("div", { class: sheet.classes.Overlay, part: "sqm-hero-image-overlay-container" },
         props.header && (h$1("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h$1("div", { class: sheet.classes.Description }, props.description)),
         props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
@@ -843,11 +856,11 @@ function HeroImageView(props, children) {
     return (h$1("div", null,
       h$1("div", { class: sheet.classes.Column },
         h$1("div", { class: "image-area" },
-          h$1("img", { class: sheet.classes.Image, src: props.imageUrl })),
-        h$1("div", { class: "text-area" },
-          props.header && (h$1("div", { class: sheet.classes.Header }, props.header)),
-          props.description && (h$1("div", { class: sheet.classes.Description }, props.description)),
-          props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+          h$1("img", { class: sheet.classes.Image, src: props.imageUrl, part: "sqm-hero-image" })),
+        h$1("div", { class: "text-area", part: "sqm-hero-image-text-area" },
+          props.header && (h$1("div", { class: sheet.classes.Header, part: "sqm-hero-image-header" }, props.header)),
+          props.description && (h$1("div", { class: sheet.classes.Description, part: "sqm-hero-image-description" }, props.description)),
+          props.buttonText && (h$1("sl-button", { exportparts: "base: sqm-hero-image-btn", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
               ? window.open(props.buttonLink)
               : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
   }
@@ -1474,6 +1487,60 @@ function usePortalChangePasswordDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const PortalFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Support Email
+     */
+    this.supportEmail = "support@example.com";
+    /**
+     * @uiName Support Text
+     * @uiWidget textArea
+     */
+    this.supportText = "For program support, contact {email}";
+    /**
+     * @uiName Hide Powered By SaaSquatch
+     */
+    this.hidePoweredBy = false;
+    /**
+     * @uiName Powered By Link
+     */
+    this.poweredByLink = "https://saasquatch.com";
+    /**
+     * @uiName Padding Top
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingTop = "large";
+    /**
+     * @uiName Padding Right
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingRight = "large";
+    /**
+     * @uiName Padding Bottom
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingBottom = "large";
+    /**
+     * @uiName Padding Left
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingLeft = "large";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h$1(PortalFooterView, Object.assign({}, getProps(this)));
+  }
+  static get assetsDirs() { return ["../../assets"]; }
+};
+
 function usePortalFrame(footerContent, headerContent) {
   const [, rerender] = dn();
   return {
@@ -1913,13 +1980,13 @@ function ProgramExplainerView(props, children) {
       display: block;
     }
   }`;
-  return (h$1("div", { class: sheet.classes.Container },
+  return (h$1("div", { class: sheet.classes.Container, part: "sqm-program-explainer-container" },
     h$1("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h$1("div", { class: sheet.classes.Header },
-      h$1("div", { class: sheet.classes.Header }, props.header)),
-    h$1("div", { class: sheet.classes.Grid }, children)));
+      h$1("div", { class: sheet.classes.Header, part: "sqm-program-explainer-header" }, props.header)),
+    h$1("div", { class: sheet.classes.Grid, part: "sqm-program-explainer-grid-container" }, children)));
 }
 
 const ProgramExplainer = class {
@@ -1985,13 +2052,13 @@ function ProgramExplainerStepView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h$1("div", { class: sheet.classes.Container },
+  return (h$1("div", { class: sheet.classes.Container, part: "sqm-program-explainer-step-container" },
     h$1("style", { type: "text/css" }, styleString),
-    h$1("div", null, props.imageUrl ? (h$1("img", { class: sheet.classes.Media, src: props.imageUrl })) : (h$1("div", { class: sheet.classes.Media },
+    h$1("div", null, props.imageUrl ? (h$1("img", { class: sheet.classes.Media, src: props.imageUrl, part: "sqm-program-explainer-step-media" })) : (h$1("div", { class: sheet.classes.Media, part: "sqm-program-explainer-step-media" },
       h$1("sl-icon", { name: props.icon })))),
     h$1("div", { class: sheet.classes.Text },
-      h$1("div", { class: sheet.classes.Header }, props.header),
-      h$1("div", { class: sheet.classes.Description }, props.description))));
+      h$1("div", { class: sheet.classes.Header, part: "sqm-program-explainer-step-header" }, props.header),
+      h$1("div", { class: sheet.classes.Description, part: "sqm-program-explainer-step-description" }, props.description))));
 }
 
 const ProgramExplainerStep = class {
@@ -2051,10 +2118,20 @@ const ProgramMenu = class {
 
 const style$1 = {
   Container: {
-    "& p": { margin: "0" },
-    display: "flex",
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
     background: "var(--sl-color-neutral-0)",
+  },
+  EndContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "0 var(--sl-spacing-large)",
+  },
+  ColumnContainer: {
+    "& p": { margin: "0" },
+    display: "flex",
     "& .left": {
       boxSizing: "border-box",
       width: "50%",
@@ -2073,8 +2150,6 @@ const style$1 = {
         width: "100%",
       },
     },
-    border: "1px solid var(--sl-color-neutral-300)",
-    borderRadius: "var(--sl-border-radius-large)",
     "@media (max-width: 499px)": {
       flexDirection: "column",
       border: "none",
@@ -2089,17 +2164,19 @@ const vanillaStyle = `
     }
   `;
 function ReferralCardView(props) {
-  return (h$1("div", null,
+  return (h$1("div", { part: "sqm-referral-card-container", class: sheet$1.classes.Container },
     h$1("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    h$1("div", { part: "sqm-base", class: sheet$1.classes.Container },
+    h$1("div", { class: sheet$1.classes.EndContainer }, props.slots.header),
+    h$1("div", { part: "sqm-columns", class: sheet$1.classes.ColumnContainer },
       h$1("div", { class: "left", style: {
           alignSelf: props.verticalAlignment,
         } }, props.slots.left),
       h$1("div", { class: "right", style: {
           alignSelf: props.verticalAlignment,
-        } }, props.slots.right))));
+        } }, props.slots.right)),
+    h$1("div", { class: sheet$1.classes.EndContainer }, props.slots.footer)));
 }
 
 const ReferralCard = class {
@@ -2120,6 +2197,8 @@ const ReferralCard = class {
     const slots = {
       left: h$1("slot", { name: "left" }),
       right: h$1("slot", { name: "right" }),
+      header: h$1("slot", { name: "header" }),
+      footer: h$1("slot", { name: "footer" }),
     };
     return (h$1(ReferralCardView, Object.assign({}, getProps(this), { slots: slots }), h$1("slot", null)));
   }
@@ -3502,6 +3581,18 @@ const ShareCode = class {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Code";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
     h(this);
   }
   disconnectedCallback() { }
@@ -3521,6 +3612,8 @@ function useDemoShareCode(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -3559,6 +3652,18 @@ const ShareLink = class {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Link";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
     h(this);
   }
   disconnectedCallback() { }
@@ -3578,6 +3683,8 @@ function useDemoShareLink(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -3917,7 +4024,7 @@ const vanillaStyle$1 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h$1("div", { class: sheet$2.classes.TimelineReward },
+  return (h$1("div", { class: sheet$2.classes.TimelineReward, part: "sqm-timeline-container" },
     h$1("style", { type: "text/css" },
       styleString$2,
       vanillaStyle$1),
@@ -4010,4 +4117,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, InputField as sqm_input_field, Leaderboard as sqm_leaderboard, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, Scroll as sqm_scroll, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TableCell as sqm_table_cell, TableRow as sqm_table_row, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, InputField as sqm_input_field, Leaderboard as sqm_leaderboard, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, Scroll as sqm_scroll, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TableCell as sqm_table_cell, TableRow as sqm_table_row, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };

package/dist/esm/sqm-empty_5.entry.js

@@ -1,12 +1,12 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { j as h$1 } from './stencil-hooks.module-6bde7453.js';
+import { m as h$1 } from './stencil-hooks.module-b48b45ec.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-06bce80d.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-83b417f0.js';
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (h("sqm-portal-container", { padding: "large", gap: "medium" },
+  return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-empty-container" },
     h("sqm-image", { "image-url": emptyStateImage }),
     h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },
@@ -50,7 +50,7 @@ function ImageView(props) {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: sheet.classes.Container },
+    h("div", { class: sheet.classes.Container, part: "sqm-image-container" },
       h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
 }
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-6bde7453.js';
+import { m as h } from './stencil-hooks.module-b48b45ec.js';
 
 const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
 

package/dist/esm/sqm-graphql-client-provider.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { m, u as useEffect, j as h } from './stencil-hooks.module-6bde7453.js';
-import './use-callback-c5579ecb.js';
-import { U, y as ye, H, a as he } from './index.module-5043fba6.js';
+import { n as m, u as useEffect, m as h } from './stencil-hooks.module-b48b45ec.js';
+import './use-callback-051c06c6.js';
+import { U, y as ye, H, b as he } from './index.module-787e5d35.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = U();

package/dist/esm/sqm-header-logo.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-6bde7453.js';
+import { m as h } from './stencil-hooks.module-b48b45ec.js';
 
 const HeroImage = class {
   constructor(hostRef) {
@@ -19,7 +19,7 @@ const HeroImage = class {
   }
   disconnectedCallback() { }
   render() {
-    return (h$1(Host, null, h$1("a", { href: this.nextPage }, h$1("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
+    return (h$1(Host, null, h$1("a", { href: this.nextPage, part: "sqm-header-logo-link" }, h$1("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
   }
 };
 

package/dist/esm/{sqm-hero-view-27de6b06.js → sqm-hero-view-875c927d.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { e as useState, u as useEffect } from './stencil-hooks.module-6bde7453.js';
-import { u as useCallback } from './use-callback-c5579ecb.js';
+import { i as useState, u as useEffect } from './stencil-hooks.module-b48b45ec.js';
+import { u as useCallback } from './use-callback-051c06c6.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 // import { IntlMessageFormat } from 'intl-messageformat';
@@ -135,13 +135,13 @@ function HeroView(props) {
   
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-hero-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-hero-two-col-container" },
+      h("div", { part: "sqm-hero-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { part: "sqm-hero-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { part: "sqm-hero-primary-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
 export { HeroView as H };

package/dist/esm/sqm-hero.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-6bde7453.js';
-import './use-callback-c5579ecb.js';
+import { m as h } from './stencil-hooks.module-b48b45ec.js';
+import './use-callback-051c06c6.js';
 import './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { H as HeroView } from './sqm-hero-view-27de6b06.js';
+import { H as HeroView } from './sqm-hero-view-875c927d.js';
 
 const Hero = class {
   constructor(hostRef) {

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -1,10 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-6bde7453.js';
-import { i as intl } from './global-4bd89b1d.js';
-import './use-callback-c5579ecb.js';
-import { O, W, f as fn, i as isDemo } from './index.module-5043fba6.js';
+import { m as h } from './stencil-hooks.module-b48b45ec.js';
+import { i as intl } from './global-0f137e54.js';
+import './use-callback-051c06c6.js';
+import { d as dist, O, W, f as fn, i as isDemo } from './index.module-787e5d35.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { d as dist } from './index-4bffa04c.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
 
 const GET_RANK = dist.gql `

package/dist/esm/sqm-link-button-view-8d9ad936.js

@@ -0,0 +1,25 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const style = {
+  Container: { display: "contents" },
+};
+const vanillaStyle = `
+:host{
+  display: inline;   
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function LinkButtonView(props) {
+  const { link, openInNewTab } = props;
+  return (h("span", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("sl-button", null,
+      h("a", { href: link, target: openInNewTab ? "_blank" : "" },
+        h("slot", null)))));
+}
+
+export { LinkButtonView as L };

package/dist/esm/sqm-link-button.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-17b4da69.js';
+import './JSS-67b5cff8.js';
+import { g as getProps } from './utils-334c1e34.js';
+import { L as LinkButtonView } from './sqm-link-button-view-8d9ad936.js';
+
+const Image = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName User Identification Text
+     */
+    this.openInNewTab = false;
+  }
+  render() {
+    return h(LinkButtonView, Object.assign({}, getProps(this)));
+  }
+};
+
+export { Image as sqm_link_button };

package/dist/esm/{sqm-navigation-sidebar-item-view-d63373b2.js → sqm-navigation-sidebar-item-view-ee402e54.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { g as gn } from './index.module-5043fba6.js';
+import { g as gn } from './index.module-787e5d35.js';
 import { g as gap } from './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
@@ -31,13 +31,13 @@ function NavigationSidebarItemView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("a", { href: data.path, onClick: (e) => {
+  return (h("a", { part: "sqm-navigation-item-link", href: data.path, onClick: (e) => {
       e.preventDefault();
       gn.push(data.path);
     }, class: sheet.classes.ItemContainer },
     h("style", { type: "text/css" }, styleString),
     h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    h("p", { class: sheet.classes.Label }, data.label)));
+    h("p", { class: sheet.classes.Label, part: "sqm-navigation-item-label" }, data.label)));
 }
 
 export { NavigationSidebarItemView as N };

package/dist/esm/sqm-navigation-sidebar-item.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-6bde7453.js';
-import './use-callback-c5579ecb.js';
-import { m as mn, i as isDemo } from './index.module-5043fba6.js';
+import { m as h } from './stencil-hooks.module-b48b45ec.js';
+import './use-callback-051c06c6.js';
+import { c as mn, i as isDemo } from './index.module-787e5d35.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-d63373b2.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-ee402e54.js';
 
 function useNavigationSidebarItem(props) {
   const currentPage = mn();

package/dist/esm/{sqm-navigation-sidebar-view-74ad47d4.js → sqm-navigation-sidebar-view-feb719ce.js}

@@ -143,14 +143,14 @@ const vanillaStyle = `
 }
 `;
 function NavigationSidebarView(props, children) {
-  return (h("div", { class: "container" },
+  return (h("div", { class: "container", part: "sqm-navigation-container" },
     h("style", null, vanillaStyle),
     h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),
     h("div", { class: "hamburger" },
       h("div", { class: "line" }),
       h("div", { class: "line" }),
       h("div", { class: "line" })),
-    h("div", { class: "menu-items" }, children)));
+    h("div", { class: "menu-items", part: "sqm-navigation-menu-items" }, children)));
 }
 
 export { NavigationSidebarView as N };

package/dist/esm/sqm-navigation-sidebar.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h, e as useState, u as useEffect } from './stencil-hooks.module-6bde7453.js';
-import './use-callback-c5579ecb.js';
-import { m as mn, O } from './index.module-5043fba6.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-74ad47d4.js';
+import { m as h, i as useState, u as useEffect } from './stencil-hooks.module-b48b45ec.js';
+import './use-callback-051c06c6.js';
+import { c as mn, O } from './index.module-787e5d35.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-feb719ce.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {

package/dist/esm/sqm-password-field.entry.js

@@ -1,11 +1,11 @@
 import { h, r as registerInstance } from './index-17b4da69.js';
-import { k as d, e as useState, j as h$1 } from './stencil-hooks.module-6bde7453.js';
-import './use-callback-c5579ecb.js';
-import { i as isDemo } from './index.module-5043fba6.js';
+import { o as d, i as useState, m as h$1 } from './stencil-hooks.module-b48b45ec.js';
+import './use-callback-051c06c6.js';
+import { i as isDemo } from './index.module-787e5d35.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-97f39def.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-3c2c2f1b.js';
 
 var constants = {
   error: {
@@ -485,7 +485,7 @@ const styleString$1 = sheet$1.toString();
 function PortalResetPasswordView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const { states, callbacks } = props;
-  return (h("div", { class: sheet$1.classes.InputContainer },
+  return (h("div", { class: sheet$1.classes.InputContainer, part: "sqm-password-field-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString$1),