@saasquatch/mint-components 1.12.1-4 → 1.12.1-6

package/dist/esm/{sqm-leaderboard-rank-view-10657658.js → sqm-leaderboard-rank-view-7cd0de83.js}

@@ -1,4 +1,4 @@
-import { h } from './index-17b4da69.js';
+import { h } from './index-60f16d0a.js';
 
 function LeaderboardRankView(props) {
   const { data } = props;

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as h } from './stencil-hooks.module-ac12ca1c.js';
-import { i as intl } from './global-04c7d3b5.js';
-import { d as dist, H, Q, y as yn, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { n as h } from './stencil-hooks.module-e20edc0b.js';
+import { i as intl } from './global-3611a2b7.js';
+import { d as dist, z, K, E as En, i as isDemo } from './index.module-f3d96fbb.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-7cd0de83.js';
 
 const GET_RANK = dist.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -20,10 +20,10 @@ const GET_RANK = dist.gql `
 `;
 function useLeaderboardRank(props) {
   var _a, _b, _c, _d;
-  const programIdContext = H();
+  const programIdContext = z();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = Q();
+  const user = K();
   const rankVariables = programId
     ? {
       type: props.leaderboardType,
@@ -36,7 +36,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = yn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = En(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],
   })

package/dist/esm/{sqm-logout-current-user-view-2c6122cd.js → sqm-logout-current-user-view-02e9f508.js}

@@ -1,4 +1,4 @@
-import { h } from './index-17b4da69.js';
+import { h } from './index-60f16d0a.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as h } from './stencil-hooks.module-ac12ca1c.js';
-import { d as dist, Q, y as yn, b as setUserIdentity, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { n as h } from './stencil-hooks.module-e20edc0b.js';
+import { d as dist, K, E as En, b as setUserIdentity, i as isDemo } from './index.module-f3d96fbb.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-2c6122cd.js';
+import './JSS-67b5cff8.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-02e9f508.js';
 
 const GET_USER_DETAILS = dist.gql `
   query getUserDetails {
@@ -19,8 +19,8 @@ const GET_USER_DETAILS = dist.gql `
 `;
 function useLogoutCurrentUser(props) {
   var _a, _b;
-  const user = Q();
-  const { loading, data } = yn(GET_USER_DETAILS, {}, !user);
+  const user = K();
+  const { loading, data } = En(GET_USER_DETAILS, {}, !user);
   const onSwitchClick = () => {
     setUserIdentity(undefined);
   };

package/dist/esm/sqm-name-fields-view-ec19e9e8.js

@@ -0,0 +1,53 @@
+import { h } from './index-60f16d0a.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { E as ErrorStyles } from './mixins-83f90fa1.js';
+
+const style = {
+  ErrorStyle: ErrorStyles,
+  FieldsContainer: {
+    "& sl-input": {
+      "margin-bottom": "var(--sl-spacing-large)",
+    },
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+sl-input::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  const { states } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (h("div", { class: sheet.classes.FieldsContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
+    }
+      : []))),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+    }
+      : [])))));
+}
+
+export { NameFieldsView as N };

package/dist/esm/sqm-name-fields.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { i as d, n as h } from './stencil-hooks.module-e20edc0b.js';
+import { i as isDemo } from './index.module-f3d96fbb.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './JSS-67b5cff8.js';
+import './mixins-83f90fa1.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-33f9cb24.js';
+import { N as NameFieldsView } from './sqm-name-fields-view-ec19e9e8.js';
+
+function useNameFields(props) {
+  const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      registrationFormState,
+      content: {
+        lastNameLabel: props.lastNameLabel,
+        firstNameLabel: props.firstNameLabel,
+      },
+    },
+  };
+}
+
+const NameFields = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName First name label
+     */
+    this.firstNameLabel = "First Name";
+    /**
+     * @uiName Last name label
+     */
+    this.lastNameLabel = "Last Name";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states } = isDemo() ? useNameFieldsDemo(this) : useNameFields(this);
+    return h$1(NameFieldsView, { states: states });
+  }
+};
+function useNameFieldsDemo(props) {
+  return cjs({
+    states: {
+      validationErrors: [],
+      content: {
+        firstNameLabel: props.firstNameLabel,
+        lastNameLabel: props.lastNameLabel,
+      },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { NameFields as sqm_name_fields };

package/dist/esm/{sqm-navigation-sidebar-item-view-60ef06cc.js → sqm-navigation-sidebar-item-view-a4e4edb6.js}

@@ -1,7 +1,7 @@
-import { h } from './index-17b4da69.js';
-import { $ as $n } from './index.module-def4aec5.js';
-import { g as gap } from './mixins-f60a614c.js';
+import { h } from './index-60f16d0a.js';
+import { c as xn } from './index.module-f3d96fbb.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { g as gap } from './mixins-83f90fa1.js';
 
 function NavigationSidebarItemView(props) {
   const { states, data } = props;
@@ -33,7 +33,7 @@ function NavigationSidebarItemView(props) {
   const styleString = sheet.toString();
   return (h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
       e.preventDefault();
-      $n.push(data.path);
+      xn.push(data.path);
     }, class: sheet.classes.ItemContainer },
     h("style", { type: "text/css" }, styleString),
     h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as h } from './stencil-hooks.module-ac12ca1c.js';
-import { S as Sn, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { n as h } from './stencil-hooks.module-e20edc0b.js';
+import { j as jn, i as isDemo } from './index.module-f3d96fbb.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-60ef06cc.js';
+import './JSS-67b5cff8.js';
+import './mixins-83f90fa1.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-a4e4edb6.js';
 
 function useNavigationSidebarItem(props) {
-  const currentPage = Sn();
+  const currentPage = jn();
   return {
     states: {
       active: currentPage.pathname === props.path,

package/dist/esm/{sqm-navigation-sidebar-view-0312e073.js → sqm-navigation-sidebar-view-ce55d74d.js}

@@ -1,4 +1,4 @@
-import { h } from './index-17b4da69.js';
+import { h } from './index-60f16d0a.js';
 
 const vanillaStyle = `
 

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as h, k as useState, f as useEffect } from './stencil-hooks.module-ac12ca1c.js';
-import { S as Sn, H } from './index.module-def4aec5.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0312e073.js';
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { n as h, k as useState, f as useEffect } from './stencil-hooks.module-e20edc0b.js';
+import { j as jn, z } from './index.module-f3d96fbb.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-ce55d74d.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {
@@ -16,8 +16,8 @@ const NavigationSidebar = class {
   }
 };
 function useNavigationSidebar() {
-  const location = Sn();
-  const programId = H();
+  const location = jn();
+  const programId = z();
   const [checked, setChecked] = useState(false);
   // Close hamburger menu after navigation
   useEffect(() => {

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

@@ -0,0 +1,386 @@
+import { h, F as Fragment, r as registerInstance } from './index-60f16d0a.js';
+import { n as h$1, k as useState } from './stencil-hooks.module-e20edc0b.js';
+import { i as intl } from './global-3611a2b7.js';
+import { D as Dn, i as isDemo, d as dist, z, K, E as En, x as xe, n as ne } from './index.module-f3d96fbb.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as getProps } from './utils-334c1e34.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView, u as useReferralCodes } from './copy-text-view-61eebf5d.js';
+import './mixins-83f90fa1.js';
+
+const style = {
+  Container: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "var(--sl-spacing-small)",
+    width: "100%",
+  },
+  TextContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-xx-small)",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function PaginationView(props) {
+  const { states, callbacks, text } = props;
+  const { onNext, onPrev } = callbacks;
+  const { currentPage, totalPages, loading } = states;
+  if (totalPages === 1)
+    return h(Fragment, null);
+  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    !loading && (h(Fragment, null,
+      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
+    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+      h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
+}
+
+function usePagination(props) {
+  var _a;
+  const context = Dn(REFERRAL_CODES_PAGINATION_CONTEXT);
+  const currentPage = context.states.currentPage + 1;
+  const totalPages = (_a = context.states) === null || _a === void 0 ? void 0 : _a.pageCount;
+  return {
+    states: {
+      currentPage,
+      totalPages,
+      loading: context.states.loading,
+    },
+    callbacks: {
+      onNext: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
+      onPrev: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
+    },
+    text: {
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText,
+      }, {
+        currentPage,
+        totalPages,
+      }),
+    },
+  };
+}
+
+const Pagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Pagination text
+     */
+    this.paginationText = "{currentPage} of {totalPages}";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const hookProps = isDemo()
+      ? useDemoPagination(getProps(this))
+      : usePagination(getProps(this));
+    return h(PaginationView, Object.assign({}, hookProps));
+  }
+};
+function useDemoPagination(props) {
+  const [currentPage, setCurrentPage] = useState(1);
+  return cjs({
+    states: {
+      currentPage,
+      totalPages: 5,
+      loading: false,
+    },
+    callbacks: {
+      onNext: () => setCurrentPage(currentPage + 1),
+      onPrev: () => setCurrentPage(currentPage - 1),
+    },
+    text: {
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
+      }, {
+        currentPage: currentPage,
+        totalPages: 5,
+      }),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const MessageLinkQuery = dist.gql `
+  query getReferralCode($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useReferralCode(props) {
+  var _a, _b;
+  const { programId = z() } = props;
+  const user = K();
+  const engagementMedium = ne();
+  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
+  const { data } = En(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
+  const [sendLoadEvent] = xe(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied] = xe(SET_CODE_COPIED);
+  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode))) !== null && _b !== void 0 ? _b : 
+  // Shown during loading
+  "...";
+  const [open, setOpen] = useState(false);
+  async function onClick() {
+    if (contextData) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText(copyString);
+    setOpen(true);
+    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
+  }
+  return {
+    ...props,
+    onClick,
+    open,
+    copyString: copyString,
+    isCopied: contextData === null || contextData === void 0 ? void 0 : contextData.isCopied,
+    showNotificationText: props.showNotificationText && !!(contextData === null || contextData === void 0 ? void 0 : contextData.singleUse),
+  };
+}
+
+const ReferralCode = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Shown inside a tooltip after someone has successfully copied the link to their clipboard
+     *
+     * @uiName Tooltip text
+     */
+    this.tooltiptext = "Copied to Clipboard";
+    /**
+     * Boolean used to show notification text below input
+     *
+     * @uiName Show notification text
+     */
+    this.showNotificationText = false;
+    /**
+     * Shown underneath single-use promo codes when the user has already copied the code
+     *
+     * @uiName Notification text
+     */
+    this.notificationText = "You've copied this code before";
+    /**
+     * The number of milliseconds that the tooltip appears for
+     *
+     * @uiName Tooltip lifespan
+     */
+    this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName Referral code alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     */
+    this.textAlign = "left";
+    /**
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Code";
+    /**
+     * Set the copy button style and placement
+     *
+     * @uiName Style
+     * @uiType string
+     * @uiEnum ["icon", "button-outside", "button-below"]
+     * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     */
+    this.buttonStyle = "icon";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoReferralCode(thisProps)
+      : useReferralCode(thisProps);
+    return h(CopyTextView, Object.assign({}, props));
+  }
+};
+function useDemoReferralCode(props) {
+  const [open, setOpen] = useState(false);
+  const copyString = "REFERRALCODE001";
+  return cjs({
+    copyString: copyString,
+    tooltiptext: props.tooltiptext,
+    textAlign: props.textAlign,
+    copyButtonLabel: props.copyButtonLabel,
+    buttonStyle: props.buttonStyle,
+    notificationText: props.notificationText,
+    showNotificationText: props.showNotificationText,
+    isCopied: props.showNotificationText,
+    isUsed: false,
+    rewardStatus: "AVAILABLE",
+    open,
+    onClick: () => {
+      // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+      // Only if called from a user-initiated event
+      navigator.clipboard.writeText(copyString);
+      setOpen(true);
+      setTimeout(() => setOpen(false), props.tooltiplifespan);
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const style$1 = {
+  Wrapper: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-large)",
+  },
+  HeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  ShareCodeContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  ShareButtonContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  TitleText: {
+    color: "var(--sl-color-neutral-700)",
+    fontSize: "var(--sl-font-size-large)",
+    margin: "0",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+function ReferralCodesView(props) {
+  const { slots, titleText, states } = props;
+  const getSlotContent = (states) => {
+    if (states.noCodes) {
+      return slots.empty;
+    }
+    if (states.loading) {
+      return slots.loading;
+    }
+    return (h("div", { class: sheet$1.classes.Wrapper },
+      h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
+      h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
+  };
+  return (h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$1),
+    h("div", { class: sheet$1.classes.HeaderContainer },
+      h("h2", { class: sheet$1.classes.TitleText }, titleText),
+      !states.noCodes && !states.loading && slots.pagination),
+    getSlotContent(states)));
+}
+
+const ReferralCodes = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Title Text
+     */
+    this.titleText = "Start sharing";
+    /**
+     * @uiName Empty State Header Text
+     */
+    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
+    /**
+     * @uiName Empty State Description Text
+     */
+    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
+    /**
+     * @uiName Empty State Image URL
+     */
+    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = getProps(this);
+    const props = isDemo()
+      ? useDemoReferralCodes(thisProps)
+      : useReferralCodes(thisProps);
+    const slots = {
+      shareButtons: h("slot", { name: "shareButtons" }),
+      shareCodes: h("slot", { name: "shareCodes" }),
+      pagination: h("slot", { name: "pagination" }),
+      empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
+      loading: h(LoadingSlot, null),
+    };
+    const viewProps = {
+      slots,
+      ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
+    };
+    return h(ReferralCodesView, Object.assign({}, viewProps));
+  }
+};
+function EmptySlot({ headerText, descriptionText, imageUrl, }) {
+  return (h("slot", { name: "empty" }, h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return h("sl-skeleton", { style: { width: "100%" } });
+}
+function useDemoReferralCodes(props) {
+  return cjs({
+    titleText: props.titleText,
+    states: {
+      noCodes: false,
+      loading: false,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { Pagination as sqm_pagination, ReferralCode as sqm_referral_code, ReferralCodes as sqm_referral_codes };

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

@@ -1,11 +1,11 @@
-import { h, r as registerInstance } from './index-17b4da69.js';
-import { i as d, k as useState, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
-import { i as isDemo } from './index.module-def4aec5.js';
+import { h, r as registerInstance } from './index-60f16d0a.js';
+import { i as d, k as useState, n as h$1 } from './stencil-hooks.module-e20edc0b.js';
+import { i as isDemo } from './index.module-f3d96fbb.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 { g as getProps } from './utils-334c1e34.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-9fc1ac80.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { E as ErrorStyles } from './mixins-83f90fa1.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-33f9cb24.js';
 
 var constants = {
   error: {