@saasquatch/mint-components 1.6.8 → 1.6.10-0

package/dist/cjs/sqm-close-button-view-fd6e8f60.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const mixins = require('./mixins-fe9d4112.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  HostBlock: mixins.HostBlock,
+  icon: {
+    cursor: "pointer",
+    position: "absolute",
+    right: "var(--sl-spacing-medium)",
+    top: "var(--sl-spacing-x-small)",
+    zIndex: "100",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function CloseButtonView(props) {
+  const { onClick } = props;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("span", { class: sheet.classes.icon, onClick: onClick },
+      index.h("svg", { width: "16", height: "16", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        index.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" })))));
+}
+
+exports.CloseButtonView = CloseButtonView;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-e67cc994.js');
+require('./mixins-fe9d4112.js');
+require('./JSS-8503a151.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-fd6e8f60.js');
+
+const CloseButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.color = "#000000";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    const sdk = index_module.getEnvironmentSDK();
+    const isPopup = sdk.type === "SquatchJS2" &&
+      ((_a = sdk.widgetIdent) === null || _a === void 0 ? void 0 : _a.engagementMedium) === "POPUP";
+    if (!isPopup)
+      return index.h("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 index.h(sqmCloseButtonView.CloseButtonView, { onClick: onClick, color: this.color });
+  }
+};
+
+exports.sqm_close_button = CloseButton;

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

@@ -6,11 +6,11 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
 const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-5beae29c.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (index.h("sqm-portal-container", { padding: "large", gap: "medium" },
+  return (index.h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
     index.h("sqm-image", { "image-url": emptyStateImage }),
     index.h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       index.h("sqm-text", { slot: "label" },
@@ -45,24 +45,24 @@ function ImageView(props) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
   return (index.h("div", null,
     index.h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    index.h("div", { class: sheet.classes.Container },
-      index.h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+    index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+      index.h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
 }
 
 const Image = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
-     * @uiName Position Alignment
+     * @uiName Position alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -103,6 +103,13 @@ const PortalContainer = class {
      * @uiName Maximum width
      */
     this.maxWidth = "100%";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiGroup Card style
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff00";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -111,52 +118,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) {
@@ -175,7 +182,7 @@ const TitledSection = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
-     * @uiName Text Alignment
+     * @uiName Text alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -184,7 +191,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"]
@@ -193,7 +200,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/cjs/sqm-form-message.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.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) {
@@ -21,6 +21,9 @@ const FormMessage = class {
     else if (this.type === "info") {
       return (index.h("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, index.h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), index.h("slot", null)));
     }
+    else if (this.type === "warning") {
+      return (index.h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true }, index.h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), index.h("slot", null)));
+    }
     else {
       return (index.h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true }, index.h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), index.h("slot", null)));
     }

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

@@ -4,16 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-require('./use-callback-86e9ac75.js');
-const index_module = require('./index.module-c6626247.js');
+const index_module = require('./index.module-e67cc994.js');
 
 async function useGraphQLClientProvider({ domain }) {
   const token = index_module.H();
   const appDomain = domain;
-  const tenantAlias = index_module.L();
+  const tenantAlias = index_module._();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = index_module.ye(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = stencilHooks_module.m(index_module.he, managedIdentityClient);
+  const managedIdentityClient = index_module.Ce(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = stencilHooks_module.m(index_module.ye, managedIdentityClient);
   stencilHooks_module.useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

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

@@ -11,19 +11,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;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    return (index.h(index.Host, null, index.h("a", { href: this.nextPage }, index.h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
+    return (index.h(index.Host, null, index.h("a", { href: this.nextPage, part: "sqm-link" }, index.h("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/cjs/sqm-instant-access-registration.cjs.entry.js

@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-e67cc994.js');
+require('./jsonpointer-11327262.js');
+const cjs = require('./cjs-1066ec21.js');
+require('./mixins-fe9d4112.js');
+require('./JSS-8503a151.js');
+const emailRegistrationView = require('./email-registration-view-f347daa7.js');
+require('./useRegistrationFormState-7b8b58e4.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-633575aa.js');
+
+const InstantAccessRegistration = class {
+  constructor(hostRef) {
+    index.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;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = index_module.isDemo()
+      ? useRegistrationDemo(this)
+      : useInstantAccessRegistration.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: index.h("slot", { name: "top" }),
+      bottomSlot: index.h("slot", { name: "bottom" }),
+    };
+    return (index.h(emailRegistrationView.EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useRegistrationDemo(props) {
+  const submit = async (_event) => {
+    index_module.setUserIdentity({
+      id: "referrer@example.com",
+      accountId: "referrer@example.com",
+      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
+    });
+  };
+  return cjs.cjs({
+    states: {
+      loading: false,
+      error: "",
+    },
+    callbacks: {
+      submit,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_instant_access_registration = InstantAccessRegistration;

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

@@ -4,31 +4,30 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const global = require('./global-0b8cbb00.js');
-require('./use-callback-86e9ac75.js');
-const index_module = require('./index.module-c6626247.js');
+const global = require('./global-e0036ac2.js');
+const index_module = require('./index.module-e67cc994.js');
 const cjs = require('./cjs-1066ec21.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
 
-const GET_RANK = index_module.dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    viewer {
-      ... on User {
-        leaderboardRank(type: $type, filter: $filter) {
-          rowNumber
-          rank
-          denseRank
-        }
-      }
-    }
-  }
+const GET_RANK = index_module.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 = index_module.O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = index_module.N();
+  const user = index_module.L();
   const rankVariables = programId
     ? {
       type: props.leaderboardType,
@@ -41,7 +40,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = index_module.dn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = index_module.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) ? global.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],
   })
@@ -59,7 +58,7 @@ const LeaderboardRank = class {
   constructor(hostRef) {
     index.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/cjs/sqm-logout-current-user-view-555c7729.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-8503a151.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 = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function LogoutCurrentUserView(props) {
+  const { filledInEmailText, onSwitchClick, switchUserText } = props;
+  return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    filledInEmailText,
+    " (",
+    index.h("a", { class: sheet.classes.Link, onClick: onSwitchClick, part: "sqm-link" }, switchUserText),
+    ")"));
+}
+
+exports.LogoutCurrentUserView = LogoutCurrentUserView;

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-e67cc994.js');
+const cjs = require('./cjs-1066ec21.js');
+require('./JSS-8503a151.js');
+const utils = require('./utils-6847bc06.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-555c7729.js');
+
+function useLogoutCurrentUser(props) {
+  var _a;
+  const user = index_module.L();
+  const onSwitchClick = () => {
+    index_module.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) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @required
+     * @uiName User identification text
+     */
+    this.userIdentificationText = "{email}";
+    /**
+     * @required
+     * @uiName Switch user button label
+     */
+    this.switchUserText = "not you?";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoLogoutCurrentUser(this)
+      : useLogoutCurrentUser(utils.getProps(this));
+    const content = {
+      userIdentificationText: this.userIdentificationText,
+      switchUserText: this.switchUserText,
+    };
+    return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, props, content));
+  }
+};
+function useDemoLogoutCurrentUser(props) {
+  return cjs.cjs({
+    onSwitchClick: () => index_module.setUserIdentity(undefined),
+    filledInEmailText: "john@example.com",
+    switchUserText: props.switchUserText,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_logout_current_user = LogoutCurrentUser;

package/dist/cjs/{sqm-navigation-sidebar-item-view-8b4f304f.js → sqm-navigation-sidebar-item-view-d49d0ac0.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const index_module = require('./index.module-c6626247.js');
+const index_module = require('./index.module-e67cc994.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 
@@ -33,13 +33,13 @@ function NavigationSidebarItemView(props) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("a", { href: data.path, onClick: (e) => {
+  return (index.h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
       e.preventDefault();
-      index_module.fn.push(data.path);
+      index_module.pn.push(data.path);
     }, class: sheet.classes.ItemContainer },
     index.h("style", { type: "text/css" }, styleString),
     index.h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    index.h("p", { class: sheet.classes.Label }, data.label)));
+    index.h("p", { class: sheet.classes.Label, part: "sqm-label" }, data.label)));
 }
 
 exports.NavigationSidebarItemView = NavigationSidebarItemView;