@saasquatch/mint-components 1.6.8 → 1.6.9

package/dist/esm/sqm-close-button-view-dc65b4e3.js

@@ -0,0 +1,26 @@
+import { h } from './index-17b4da69.js';
+import { H as HostBlock } from './mixins-f60a614c.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const style = {
+  HostBlock: HostBlock,
+  icon: {
+    cursor: "pointer",
+    position: "absolute",
+    right: "var(--sl-spacing-medium)",
+    top: "var(--sl-spacing-x-small)",
+    zIndex: "100",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function CloseButtonView(props) {
+  const { onClick } = props;
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("span", { class: sheet.classes.icon, onClick: onClick },
+      h("svg", { width: "16", height: "16", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        h("path", { d: "M56 5.64L50.36 0L28 22.36L5.64 0L0 5.64L22.36 28L0 50.36L5.64 56L28 33.64L50.36 56L56 50.36L33.64 28L56 5.64Z", fill: props.color || "black" })))));
+}
+
+export { CloseButtonView as C };

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
+import { m as h } from './stencil-hooks.module-14b87f98.js';
+import { g as getEnvironmentSDK } from './index.module-bbce47bd.js';
+import './mixins-f60a614c.js';
+import './JSS-67b5cff8.js';
+import { C as CloseButtonView } from './sqm-close-button-view-dc65b4e3.js';
+
+const CloseButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.color = "#000000";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    const sdk = getEnvironmentSDK();
+    const isPopup = sdk.type === "SquatchJS2" &&
+      ((_a = sdk.widgetIdent) === null || _a === void 0 ? void 0 : _a.engagementMedium) === "POPUP";
+    if (!isPopup)
+      return h$1("div", { style: { display: "none" } });
+    const onClick = () => {
+      var _a, _b;
+      if (sdk.type === "SquatchJS2") {
+        (_b = (_a = sdk.api).close) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+    };
+    return h$1(CloseButtonView, { onClick: onClick, color: this.color });
+  }
+};
+
+export { CloseButton as sqm_close_button };

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 { m as h$1 } from './stencil-hooks.module-b48b45ec.js';
+import { m as h$1 } from './stencil-hooks.module-14b87f98.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-2307476f.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-ab89c6cc.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-base" },
     h("sqm-image", { "image-url": emptyStateImage }),
     h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },
@@ -41,24 +41,24 @@ function ImageView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: sheet.classes.Container },
-      h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+    h("div", { class: sheet.classes.Container, part: "sqm-base" },
+      h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
 }
 
 const Image = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * @uiName Position Alignment
+     * @uiName Position alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -99,6 +99,13 @@ const PortalContainer = class {
      * @uiName Maximum width
      */
     this.maxWidth = "100%";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiGroup Card style
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff00";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -107,52 +114,52 @@ const PortalContainer = class {
   }
 };
 
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    margin: 0;
-  }
+const vanillaStyle = `
+  sqm-text {
+    display: block;
+  }
+
+  sqm-text h1 {
+    font-size: var(--sl-font-size-xxx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h2 {
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h3 {
+    font-size: var(--sl-font-size-x-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h4 {
+    font-size: var(--sl-font-size-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text p {
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text sub {
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-400);
+    margin: 0;
+  }
 `;
 const Text = class {
   constructor(hostRef) {
@@ -171,7 +178,7 @@ const TitledSection = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * @uiName Text Alignment
+     * @uiName Text alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -180,7 +187,7 @@ const TitledSection = class {
     /**
      * Margin applied to the bottom of the label slot
      *
-     * @uiName Label Bottom Margin
+     * @uiName Label bottom margin
      * @uiType string
      * @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"]
@@ -189,7 +196,7 @@ const TitledSection = class {
     /**
      * Padding applied to all 4 sides of the container
      *
-     * @uiName Section Padding
+     * @uiName Section padding
      * @uiType string
      * @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"]

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-b48b45ec.js';
+import { m as h } from './stencil-hooks.module-14b87f98.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)}";
+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)}.Warning::part(base){background-color:var(--sl-color-warning-100);border-color:var(--sl-color-warning-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)}";
 
 const FormMessage = class {
   constructor(hostRef) {
@@ -17,6 +17,9 @@ const FormMessage = class {
     else if (this.type === "info") {
       return (h$1("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), h$1("slot", null)));
     }
+    else if (this.type === "warning") {
+      return (h$1("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), h$1("slot", null)));
+    }
     else {
       return (h$1("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
     }

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

@@ -1,15 +1,14 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { n as m, u as useEffect, m as h } from './stencil-hooks.module-b48b45ec.js';
-import './use-callback-051c06c6.js';
-import { H, y as ye, L, h as he } from './index.module-3c720e8f.js';
+import { n as m, f as useEffect, m as h } from './stencil-hooks.module-14b87f98.js';
+import { H, C as Ce, _, c as ye } from './index.module-bbce47bd.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = H();
   const appDomain = domain;
-  const tenantAlias = L();
+  const tenantAlias = _();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = ye(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = m(he, managedIdentityClient);
+  const managedIdentityClient = Ce(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = m(ye, managedIdentityClient);
   useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

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 { m as h } from './stencil-hooks.module-b48b45ec.js';
+import { m as h } from './stencil-hooks.module-14b87f98.js';
 
 const HeroImage = class {
   constructor(hostRef) {
@@ -7,19 +7,19 @@ const HeroImage = class {
     /**
      * Page participants are navigated to after clicking the header logo.
      *
-     * @uiName Redirect Path
+     * @uiName Redirect path
      * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * @uiName Logo Height
+     * @uiName Logo height
      */
     this.height = 60;
     h(this);
   }
   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-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-instant-access-registration.entry.js

@@ -0,0 +1,154 @@
+import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
+import { m as h } from './stencil-hooks.module-14b87f98.js';
+import { i as isDemo, e as setUserIdentity } from './index.module-bbce47bd.js';
+import './jsonpointer-388a7082.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './mixins-f60a614c.js';
+import './JSS-67b5cff8.js';
+import { E as EmailRegistrationView } from './email-registration-view-0a11e959.js';
+import './useRegistrationFormState-7bf6c145.js';
+import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-175820dc.js';
+
+const InstantAccessRegistration = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName First name field label
+     */
+    this.firstNameLabel = "First Name";
+    /**
+     * @uiName Last name field label
+     */
+    this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Register button text
+     */
+    this.registerLabel = "Start Referring";
+    /**
+     * Require your participants to enter their first and last name.
+     *
+     * @uiName Include name fields
+     */
+    this.includeName = false;
+    /**
+     * @uiName Hide border
+     * @uiGroup Card style
+     */
+    this.hideBorder = false;
+    /**
+     * Display this message when a required field has not been filled out.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * Display this message when the given email is invalid.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.invalidEmailErrorMessage = "Please enter a valid email address";
+    /**
+     * Display this message when the form submission unexpectedly fails.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.networkErrorMessage = "There was a problem signing you in. Please wait a moment and try again. If this problem continues, contact Support for help resolving this issue.";
+    /**
+     * @uiName Top padding
+     * @uiGroup Card style
+     * @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 Right padding
+     * @uiGroup Card style
+     * @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 Bottom padding
+     * @uiGroup Card style
+     * @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 Left padding
+     * @uiGroup Card style
+     * @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";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiGroup Card style
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff";
+    /**
+     * @undocumented
+     * @uiType boolean
+     */
+    this.includeCookies = false;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? useRegistrationDemo(this)
+      : useInstantAccessRegistration(this);
+    const content = {
+      emailLabel: this.emailLabel,
+      registerLabel: this.registerLabel,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
+      includeName: this.includeName,
+      hideBorder: this.hideBorder,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      paddingTop: this.paddingTop,
+      paddingBottom: this.paddingBottom,
+      paddingLeft: this.paddingLeft,
+      paddingRight: this.paddingRight,
+      backgroundColor: this.backgroundColor,
+      // slots
+      topSlot: h$1("slot", { name: "top" }),
+      bottomSlot: h$1("slot", { name: "bottom" }),
+    };
+    return (h$1(EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useRegistrationDemo(props) {
+  const submit = async (_event) => {
+    setUserIdentity({
+      id: "referrer@example.com",
+      accountId: "referrer@example.com",
+      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
+    });
+  };
+  return cjs({
+    states: {
+      loading: false,
+      error: "",
+    },
+    callbacks: {
+      submit,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { InstantAccessRegistration as sqm_instant_access_registration };

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

@@ -1,30 +1,29 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-b48b45ec.js';
-import { i as intl } from './global-27ee1626.js';
-import './use-callback-051c06c6.js';
-import { d as dist, O, N, a as dn, i as isDemo } from './index.module-3c720e8f.js';
+import { m as h } from './stencil-hooks.module-14b87f98.js';
+import { i as intl } from './global-9992475a.js';
+import { d as dist, O, L, b as mn, i as isDemo } from './index.module-bbce47bd.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
 
-const GET_RANK = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    viewer {
-      ... on User {
-        leaderboardRank(type: $type, filter: $filter) {
-          rowNumber
-          rank
-          denseRank
-        }
-      }
-    }
-  }
+const GET_RANK = dist.gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    viewer {
+      ... on User {
+        leaderboardRank(type: $type, filter: $filter) {
+          rowNumber
+          rank
+          denseRank
+        }
+      }
+    }
+  }
 `;
 function useLeaderboardRank(props) {
   var _a, _b, _c, _d;
   const programIdContext = O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = N();
+  const user = L();
   const rankVariables = programId
     ? {
       type: props.leaderboardType,
@@ -37,7 +36,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = dn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = mn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const fullRankText = ((_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: (_d = (_c = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _c === void 0 ? void 0 : _c.leaderboardRank) === null || _d === void 0 ? void 0 : _d[props.rankType],
   })
@@ -55,7 +54,7 @@ const LeaderboardRank = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * @uiName Rank Text
+     * @uiName Rank text
      * @uiWidget textArea
      */
     this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";

package/dist/esm/sqm-logout-current-user-view-2d740794.js

@@ -0,0 +1,35 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const style = {
+  Container: { color: "var(--sl-color-neutral-600)" },
+  Link: {
+    textDecoration: "none",
+    color: "var(--sl-color-primary-700)",
+    cursor: "pointer",
+    "&:hover": {
+      color: "var(--sl-color-primary-800)",
+    },
+  },
+};
+const vanillaStyle = `
+:host, sqm-logout-current-user{
+  display: inline;   
+}
+
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function LogoutCurrentUserView(props) {
+  const { filledInEmailText, onSwitchClick, switchUserText } = props;
+  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    filledInEmailText,
+    " (",
+    h("a", { class: sheet.classes.Link, onClick: onSwitchClick, part: "sqm-link" }, switchUserText),
+    ")"));
+}
+
+export { LogoutCurrentUserView as L };

package/dist/esm/sqm-logout-current-user.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
+import { m as h } from './stencil-hooks.module-14b87f98.js';
+import { L, e as setUserIdentity, i as isDemo } from './index.module-bbce47bd.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './JSS-67b5cff8.js';
+import { g as getProps } from './utils-334c1e34.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-2d740794.js';
+
+function useLogoutCurrentUser(props) {
+  var _a;
+  const user = L();
+  const onSwitchClick = () => {
+    setUserIdentity(undefined);
+  };
+  const filledInEmailText = (_a = props.userIdentificationText) === null || _a === void 0 ? void 0 : _a.replace("{email}", (user === null || user === void 0 ? void 0 : user.id) || "Error fetching email");
+  return {
+    onSwitchClick,
+    filledInEmailText,
+    ...props,
+  };
+}
+
+const LogoutCurrentUser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @required
+     * @uiName User identification text
+     */
+    this.userIdentificationText = "{email}";
+    /**
+     * @required
+     * @uiName Switch user button label
+     */
+    this.switchUserText = "not you?";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo()
+      ? useDemoLogoutCurrentUser(this)
+      : useLogoutCurrentUser(getProps(this));
+    const content = {
+      userIdentificationText: this.userIdentificationText,
+      switchUserText: this.switchUserText,
+    };
+    return h$1(LogoutCurrentUserView, Object.assign({}, props, content));
+  }
+};
+function useDemoLogoutCurrentUser(props) {
+  return cjs({
+    onSwitchClick: () => setUserIdentity(undefined),
+    filledInEmailText: "john@example.com",
+    switchUserText: props.switchUserText,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { LogoutCurrentUser as sqm_logout_current_user };

package/dist/esm/{sqm-navigation-sidebar-item-view-6f909ba7.js → sqm-navigation-sidebar-item-view-debb6dfe.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { f as fn } from './index.module-3c720e8f.js';
+import { p as pn } from './index.module-bbce47bd.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-link", href: data.path, onClick: (e) => {
       e.preventDefault();
-      fn.push(data.path);
+      pn.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-label" }, data.label)));
 }
 
 export { NavigationSidebarItemView as N };