@saasquatch/mint-components 1.10.2-5 → 1.10.2-7

package/dist/cjs/sqm-rewards-table-customer-note-column.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-require('./index.module-b1f9bdb8.js');
-const reRender = require('./re-render-95d86b86.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
 
 const RewardTableCustomerNoteColumn = class {
   constructor(hostRef) {
@@ -14,7 +14,7 @@ const RewardTableCustomerNoteColumn = class {
      * @uiName Column title
      */
     this.columnTitle = "Note";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -2,25 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const global = require('./global-975908ec.js');
-const index_module = require('./index.module-b1f9bdb8.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-02e50f09.js');
+const index_module = require('./index.module-df530553.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-80d7642e.js');
-const reRender = require('./re-render-95d86b86.js');
-const useChildElements = require('./useChildElements-91b9f4ff.js');
-const luxon = require('./luxon-20eafbd9.js');
-const mockRewardData = require('./mockRewardData-3c470512.js');
-const index = require('./index-56d1fa5b.js');
-const useReferralTable = require('./useReferralTable-4756d4fc.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
+const luxon = require('./luxon-05098e19.js');
+const mockRewardData = require('./mockRewardData-4258e067.js');
+const useReferralTable = require('./useReferralTable-a76adb0d.js');
 const utils = require('./utils-6847bc06.js');
 
 const debug = stencilHooks_module.browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";
-const GET_REWARDS = index.dist.gql `
+const GET_REWARDS = index_module.dist.gql `
   query getRewards(
     $limit: Int!
     $offset: Int!
@@ -136,7 +135,7 @@ const GET_REWARDS = index.dist.gql `
     }
   }
 `;
-const GET_IMPACT_TAX = index.dist.gql `
+const GET_IMPACT_TAX = index_module.dist.gql `
   query getImpactTax {
     viewer {
       ... on User {
@@ -210,7 +209,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index$1.h)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index.h)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -278,7 +277,7 @@ async function tryMethod(c, callback) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
     debug("label promise failed", e);
-    return index$1.h("span", null);
+    return index.h("span", null);
   }
   try {
     return await labelPromise;
@@ -288,15 +287,15 @@ async function tryMethod(c, callback) {
     // This should not happen so we fail fast
     debug("Error rendering label", e);
     const userError = useReferralTable.generateUserError(e);
-    return (index$1.h("details", null,
-      index$1.h("summary", null, "Error"),
+    return (index.h("details", null,
+      index.h("summary", null, "Error"),
       userError));
   }
 }
 
 const RewardsTable = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /** @uiName Rewards per page */
     this.perPage = 4;
     /** @uiName Hide column labels */
@@ -314,27 +313,27 @@ const RewardsTable = class {
     this.smBreakpoint = 599;
     /** @uiName Tablet breakpoint  */
     this.mdBreakpoint = 799;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = index$1.h(EmptySlot, null);
-    const loading = index$1.h(LoadingSlot, null);
+    const empty = index.h(EmptySlot, null);
+    const loading = index.h(LoadingSlot, null);
     const { states, data, callbacks, elements } = index_module.isDemo()
       ? useRewardsTableDemo(this, empty, loading)
       : useRewardsTable(this, empty, loading);
     reRender.useRequestRerender([this.perPage]);
-    return (index$1.h(GenericTableView.GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+    return (index.h(GenericTableView.GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
 };
 function EmptySlot() {
-  return (index$1.h("slot", { name: "empty" }, index$1.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
+  return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
 }
 function LoadingSlot() {
-  return (index$1.h("slot", { name: "loading" }, index$1.h(LoadingRow, null), index$1.h(LoadingRow, null), index$1.h(LoadingRow, null), index$1.h(LoadingRow, null)));
+  return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (index$1.h("sqm-table-row", null, index$1.h("sqm-table-cell", { colspan: 5 }, index$1.h("sl-skeleton", null))));
+  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sl-skeleton", null))));
 }
 function useRewardsTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
@@ -429,10 +428,10 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
 
 const RewardTableDateCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.ignored = true;
     this.locale = "en";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -446,7 +445,7 @@ const RewardTableDateCell = class {
 
 const RewardTableDateColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Date column title
      */
@@ -462,18 +461,18 @@ const RewardTableDateColumn = class {
      * @uiEnumNames ["Date Given", "Date Expires", "Date Cancelled", "Date Redeemed", "Date Scheduled For"]
      */
     this.dateShown = "dateGiven";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (index$1.h("sqm-rewards-table-date-cell", { date: data[this.dateShown], locale: options === null || options === void 0 ? void 0 : options.locale }));
+    return (index.h("sqm-rewards-table-date-cell", { date: data[this.dateShown], locale: options === null || options === void 0 ? void 0 : options.locale }));
   }
   async renderLabel() {
     return this.columnTitle;
   }
   render() {
     reRender.useRequestRerender([this.dateShown, this.columnTitle]);
-    return index$1.h(index$1.Host, { style: { display: "none" } });
+    return index.h(index.Host, { style: { display: "none" } });
   }
 };
 
@@ -550,7 +549,7 @@ const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 const RewardTableRewardsCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
   }
   // TODO: value function from portalv2
   render() {
@@ -563,19 +562,19 @@ const RewardTableRewardsCell = class {
       const singleReward = reward.prettyValueNumber === "1" ||
         (reward.dateRedeemed && reward.prettyAvailableNumber === "0");
       if (reward.type === "FUELTANK") {
-        return (index$1.h("div", { class: sheet.classes.Fueltank }, reward.prettyValue, reward.fuelTankCode && (index$1.h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) }, index$1.h("sl-tooltip", { trigger: "click", placement: "top", distance: 5, skidding: 11, content: this.copyText, "onSl-show": (e) => setTimeout(() => e.path[0].hide(), 1000) }, index$1.h("span", { class: "text" }, reward.fuelTankCode), index$1.h("span", { class: "icon" }, index$1.h("sl-icon", { name: "files" })))))));
+        return (index.h("div", { class: sheet.classes.Fueltank }, reward.prettyValue, reward.fuelTankCode && (index.h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) }, index.h("sl-tooltip", { trigger: "click", placement: "top", distance: 5, skidding: 11, content: this.copyText, "onSl-show": (e) => setTimeout(() => e.path[0].hide(), 1000) }, index.h("span", { class: "text" }, reward.fuelTankCode), index.h("span", { class: "icon" }, index.h("sl-icon", { name: "files" })))))));
       }
       if (reward.type === "CREDIT" && !singleReward) {
         const remainingValue = parseFloat(reward.prettyValueNumber) -
           parseFloat(reward.prettyRedeemedNumber);
         const progress = Math.round((remainingValue / parseFloat(reward.prettyValueNumber)) * 100);
         const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
-          reward.statuses.includes("CANCELLED") ? (index$1.h("div", null, global.intl.formatMessage({
+          reward.statuses.includes("CANCELLED") ? (index.h("div", null, global.intl.formatMessage({
           id: "redeemedText",
           defaultMessage: this.redeemedText,
         }, {
           redeemedAmount: reward.prettyRedeemedCredit,
-        }))) : (index$1.h("div", null, global.intl.formatMessage({
+        }))) : (index.h("div", null, global.intl.formatMessage({
           id: "availableText",
           defaultMessage: this.availableText,
         }, {
@@ -617,17 +616,17 @@ const RewardTableRewardsCell = class {
         };
         const sheet = JSS.createStyleSheet(style);
         const styleString = sheet.toString();
-        return (index$1.h("div", null, index$1.h("style", { type: "text/css" }, styleString), index$1.h("div", { class: sheet.classes.Container }, index$1.h("span", { part: "sqm-reward-cell-value" }, pimpedPrettyValue + " "), index$1.h("br", null), " ", index$1.h("div", { part: "sqm-reward-cell-progress", class: sheet.classes.Progress }), index$1.h("span", { part: "sqm-reward-cell-subtext", class: sheet.classes.Subtext }, progressBarSubtext))));
+        return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("div", { class: sheet.classes.Container }, index.h("span", { part: "sqm-reward-cell-value" }, pimpedPrettyValue + " "), index.h("br", null), " ", index.h("div", { part: "sqm-reward-cell-progress", class: sheet.classes.Progress }), index.h("span", { part: "sqm-reward-cell-subtext", class: sheet.classes.Subtext }, progressBarSubtext))));
       }
-      return index$1.h("div", null, pimpedPrettyValue);
+      return index.h("div", null, pimpedPrettyValue);
     };
-    return (index$1.h("div", { style: { display: "contents" } }, index$1.h("style", { type: "text/css" }, styleString), index$1.h(RewardValue, { reward: this.reward })));
+    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString), index.h(RewardValue, { reward: this.reward })));
   }
 };
 
 const RewardsTableColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Reward column title
      */
@@ -644,11 +643,11 @@ const RewardsTableColumn = class {
      * @uiName Copied fuel tank text
      */
     this.copyText = "Copied!";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (index$1.h("sqm-rewards-table-reward-cell", { reward: data, redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: options === null || options === void 0 ? void 0 : options.locale, exportparts: "sqm-rewards-cell-value, sqm-rewards-cell-progress-bar, sqm-rewards-cell-subtext" }));
+    return (index.h("sqm-rewards-table-reward-cell", { reward: data, redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: options === null || options === void 0 ? void 0 : options.locale, exportparts: "sqm-rewards-cell-value, sqm-rewards-cell-progress-bar, sqm-rewards-cell-subtext" }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -660,20 +659,20 @@ const RewardsTableColumn = class {
       this.availableText,
       this.copyText,
     ]);
-    return index$1.h(index$1.Host, { style: { display: "none" } });
+    return index.h(index.Host, { style: { display: "none" } });
   }
 };
 
 const RewardTableSourceCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.locale = "en";
   }
   render() {
     global.intl.locale = this.locale;
     const RewardSource = ({ reward }) => {
       var _a;
-      return (index$1.h("span", null, global.intl.formatMessage({
+      return (index.h("span", null, global.intl.formatMessage({
         id: "rewardSourceText",
         defaultMessage: this.rewardSourceText,
       }, {
@@ -684,15 +683,15 @@ const RewardTableSourceCell = class {
     const SOURCE_COLUMN_LENGTH = 21;
     const RewardExchangeBadge = ({ reward }) => {
       var _a;
-      const rewardExchange = (index$1.h("div", null, index$1.h("span", { style: {
+      const rewardExchange = (index.h("div", null, index.h("span", { style: {
           fontSize: "var(--sl-font-size-small)",
           color: "var(--sl-color-neutral-500)",
-        } }, this.rewardExchangeText), index$1.h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
+        } }, this.rewardExchangeText), index.h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit, " → ", reward.prettyValue));
       return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
         .length +
         reward.prettyValue.length <
-        SOURCE_COLUMN_LENGTH ? (rewardExchange) : (index$1.h("div", { style: {
+        SOURCE_COLUMN_LENGTH ? (rewardExchange) : (index.h("div", { style: {
           display: "inline-block",
           verticalAlign: "top",
         } }, rewardExchange));
@@ -709,9 +708,9 @@ const RewardTableSourceCell = class {
       return `${user.firstName} ${user.lastName}`;
     };
     const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
-      this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (index$1.h("p", { style: {
+      this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (index.h("p", { style: {
         color: "var(--sl-color-gray-400)",
-      } }, this.deletedReferralText)) : (index$1.h("div", null, index$1.h("div", { style: {
+      } }, this.deletedReferralText)) : (index.h("div", null, index.h("div", { style: {
         fontSize: "var(--sl-font-size-small)",
         color: "var(--sl-color-neutral-500)",
       } }, global.intl.formatMessage({
@@ -719,16 +718,16 @@ const RewardTableSourceCell = class {
       defaultMessage: this.referralText,
     }, {
       rewardSource: this.reward.rewardSource,
-    })), index$1.h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP"
+    })), index.h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP"
       ? getFullName(this.reward.referral.referredUser)
-      : getFullName(this.reward.referral.referrerUser))))) : this.reward.exchangedRewardRedemptionTransaction ? (index$1.h(RewardExchangeBadge, { reward: this.reward })) : (index$1.h(RewardSource, { reward: this.reward }));
-    return index$1.h(Source, null);
+      : getFullName(this.reward.referral.referrerUser))))) : this.reward.exchangedRewardRedemptionTransaction ? (index.h(RewardExchangeBadge, { reward: this.reward })) : (index.h(RewardSource, { reward: this.reward }));
+    return index.h(Source, null);
   }
 };
 
 const RewardTableUserColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Soruce column title
      */
@@ -763,11 +762,11 @@ const RewardTableUserColumn = class {
      * @uiWidget textArea
      */
     this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (index$1.h("sqm-rewards-table-source-cell", { reward: data, anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText, locale: options === null || options === void 0 ? void 0 : options.locale }));
+    return (index.h("sqm-rewards-table-source-cell", { reward: data, anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText, locale: options === null || options === void 0 ? void 0 : options.locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -781,7 +780,7 @@ const RewardTableUserColumn = class {
       this.referralText,
       this.rewardSourceText,
     ]);
-    return index$1.h(index$1.Host, { style: { display: "none" } });
+    return index.h(index.Host, { style: { display: "none" } });
   }
 };
 
@@ -811,7 +810,7 @@ const sheet$1 = JSS.createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
 const RewardTableStatusCell = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.expiryText = "Expires";
     this.locale = "en";
     this.pendingUsTax = "W-9 required";
@@ -951,9 +950,9 @@ const RewardTableStatusCell = class {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    return (index$1.h("div", { style: { display: "contents" } }, index$1.h("style", { type: "text/css" }, styleString$1), index$1.h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
+    return (index.h("div", { style: { display: "contents" } }, index.h("style", { type: "text/css" }, styleString$1), index.h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
         ? sheet$1.classes.RedeemBadge
-        : sheet$1.classes.Badge }, statusText), index$1.h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
+        : sheet$1.classes.Badge }, statusText), index.h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
       pendingReasons ||
       this.getPayoutStatusText(rewardStatus) ||
       date)));
@@ -980,7 +979,7 @@ const RewardTableStatusCell = class {
 
 const RewardTableStatusColumn = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * @uiName Column title
      */
@@ -1068,11 +1067,11 @@ const RewardTableStatusColumn = class {
      * @uiName Payout approved text
      */
     this.payoutApproved = "Reward approved for payout and was scheduled for payment based on your settings.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (index$1.h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: data, taxConnection: options === null || options === void 0 ? void 0 : options.taxConnection, expiryText: this.expiryText, pendingScheduled: this.pendingScheduled, pendingUsTax: this.pendingUsTax, pendingUnhandled: this.pendingUnhandled, pendingReviewText: this.pendingReviewText, payoutFailed: this.payoutFailed, payoutApproved: this.payoutApproved, payoutCancelled: this.payoutCancelled, deniedText: this.deniedText, locale: options === null || options === void 0 ? void 0 : options.locale }));
+    return (index.h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: data, taxConnection: options === null || options === void 0 ? void 0 : options.taxConnection, expiryText: this.expiryText, pendingScheduled: this.pendingScheduled, pendingUsTax: this.pendingUsTax, pendingUnhandled: this.pendingUnhandled, pendingReviewText: this.pendingReviewText, payoutFailed: this.payoutFailed, payoutApproved: this.payoutApproved, payoutCancelled: this.payoutCancelled, deniedText: this.deniedText, locale: options === null || options === void 0 ? void 0 : options.locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -1087,7 +1086,7 @@ const RewardTableStatusColumn = class {
       this.pendingUsTax,
       this.pendingUnhandled,
     ]);
-    return index$1.h(index$1.Host, { style: { display: "none" } });
+    return index.h(index.Host, { style: { display: "none" } });
   }
 };
 

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

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-require('./global-975908ec.js');
-const index_module = require('./index.module-b1f9bdb8.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./global-02e50f09.js');
+const index_module = require('./index.module-df530553.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-80d7642e.js');
-require('./useChildElements-91b9f4ff.js');
-const luxon = require('./luxon-20eafbd9.js');
-const index$1 = require('./index-56d1fa5b.js');
+require('./useChildElements-e0d44916.js');
+const luxon = require('./luxon-05098e19.js');
 require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-a0e33f21.js');
@@ -22,16 +21,16 @@ const emailRegistrationView = require('./email-registration-view-248652bb.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-c9f18d96.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-dd53f947.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-d8a21014.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-72dca980.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-a125ec5f.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-292b5bf4.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-969c49ed.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-c3754c1c.js');
-require('./utilities-42a1810d.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-fde54e35.js');
+require('./utilities-cec9dd36.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
-const ShadowViewAddon = require('./ShadowViewAddon-a982f064.js');
+const ShadowViewAddon = require('./ShadowViewAddon-bfb7992d.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-c3a5024d.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-28b14d28.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1814,7 +1813,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
   MultipleStats: MultipleStats
 });
 
-const scenario$4 = "@owner:noah @author:noah\nFeature: Leaderboard\n\tThe leaderboard supports three main cases\n\t- Top Started Referrers\n\t- Top Converted Referrers\n\t- Top Point Earners\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\n\n  Background: A user exists\n    Given a user\n    And they are viewing the leaderboard\n\n  @motivating\n  Scenario Outline: Two types of referrals leaderboards can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with <value>\n    And there are started referrals on the tenant\n    And there are started converted on the tenant\n    When the user views the leaderboard\n    Then they see the referral <referralType> leaderboard\n\n    Examples:\n      | value                 | referralType |\n      | topStartedReferrers   | started      |\n      | topConvertedReferrers | converted    |\n\n  @motivating\n  Scenario: The top point earners leaderboard can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\n    And there are users with points\n    When the user views the leaderboard\n    Then they see the top point earners leaderboard\n    And text values are displayed for point counts\n\n  @minutia\n  Scenario Outline: Reward pretty value is used on the top point earners leaderboard\n    Given top point earners leaderboard\n    And the \"POINT\" reward unit has a pretty value for the following locales\n      | locale |\n      | en     |\n      | fr     |\n      | tr     |\n    When the user views the leaderboard\n    And they have <locale>\n    Then they see the translated pretty value in the stat value column\n\n  @motivating\n  Scenario Outline: Program Context is used by default to filter leaderboard results\n    Given a <leaderboardType> leaderboard loaded with program context for \"my-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Program Id context can be overwritten with a prop\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-test-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Global leaderboards can be displayed by clearing program context\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\n\t\t#This can also be done with a program section in a similar manner\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\n    When the user views the leaderboard\n    Then they see global <results>\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario: Leaderboard results are shown in descending order\n    Given there are leaderboard results\n    When the user views the leaderboard\n    Then they see up to the 10 top leaderboard results\n    And leaderboard is in descending order\n\n  @motivating\n  Scenario Outline: Leaderboard results can be filtered with a time interval\n    Given a <leaderboardType> leaderboard\n    And it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n    When the user views the leaderboard\n    Then they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Leaderboard rank type can be configured\n    Given a leaderboard has prop \"rank-type\" with <value>\n    When the user views the leaderboard\n    Then their leaderboard rank is their <rank>\n\n    Examples:\n      | value     | rank       |\n      | rowNumber | row number |\n      | denseRank | dense rank |\n      | rank      | rank       |\n\n  @minutia\n  Scenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\n    Given a leaderboard has prop \"max-rows\" with <value>\n    And the leaderboard has <resultCount>\n    When the user views the leaderboard\n    Then they see <number> rows\n\n    Examples:\n      | value | resultCount | number |\n      |       |          10 |     10 |\n      |     5 |          10 |      5 |\n      |     3 |           1 |      1 |\n      |    25 |          15 |     15 |\n\n  @minutiae @ui\n  Scenario: Leaderboards with no results show an empty state\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then an empty state is dislayed\n    And they see an image of a leaderboard\n    And below they see \"View your rank in the leaderboard\"\n    And below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\n    And the text is center aligned\n\n  @minutiae @ui\n  Scenario: A custom empty state can be provided\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then the contents of the \"empty\" slot are displayed\n\n  @minutiae @ui\n  Scenario: User is on Essentials plan\n    Given the user has an Essentials plan\n    When they view the leaderboard\n    Then a message telling them to upgrade their plan appears:\n      \"\"\"\n      Contact Support to upgrade your plan and start leveraging\n                gamification in your program.\n      \"\"\"\n    And an empty table image is displayed\n\n  @minutiae @ui\n  Scenario: Leaderboard headings can be customized\n    Given a leaderboard\n    And it has the following props\n      | prop         | value          |\n      | rankheading  | Place          |\n      | usersheading | Customer       |\n      | statsheading | Referral Count |\n      | show-rank    | true           |\n    When the user views the leaderboard\n    Then they see the following columns with headings\n      | column | heading        |\n      | rank   | Place          |\n      | user   | Customer       |\n      | stat   | Referral Count |\n\n  @motivating @ui\n  Scenario Outline: Leaderboard rank can be hidden or shown\n    Given a leaderboard\n    And it has prop \"show-rank\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the rank column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | see       |\n      | false     | don't see |\n      |           | don't see |\n\n  @motivating @ui\n  Scenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\n    Given a user in the top 10 of the leaderboard results\n    When they view the leaderboard\n    Then they see the row with their name highlighted with brand colour\n\n  @motivating @ui\n  Scenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\n    Given a user <mayHave> completed actions counted by the leaderboard\n    And they are not in the top 10 leaderboard results\n    And the leaderboard has prop \"show-user\" with <value>\n    When they view the leaderboard\n    Then they <maySee> \"...\" under the top 10 leaderboard results\n    And under \"...\" they <maySee> a row highlighted with brand colour\n    And they <maySee> their name\n    And they <maySee> their leaderboard value\n    And they <maySeeRank>\n\n    Examples:\n      | mayHave | value | maySee    | maySeeRank           |\n      | has     | true  | see       | see their rank       |\n      | hasn't  | true  | see       | don't see their rank |\n      | N/A     | false | don't see | don't see their rank |\n      | hasn't  |       | see       | don't see their rank |\n\n  @minutiae\n  Scenario: Users without names are displayed as an \"Anonymous User\"\n    Given a user\n    And they do not have a first name\n    And they do not have a last initial\n    When they view the leaderboard\n    Then they see the user displayed as \"Anonymous User\"\n\n  @minutiae\n  Scenario Outline: If a user only has a first or last name, then only that is displayed\n    Given a user\n    And they only have a <name>\n    When they view the leaderboard\n    Then they only see their <name>\n\n    Examples:\n      | name      |\n      | firstName |\n      | lastName  |\n";
+const scenario$4 = "@owner:noah @author:noah\nFeature: Leaderboard\n\tThe leaderboard supports three main cases\n\t- Top Started Referrers\n\t- Top Converted Referrers\n\t- Top Point Earners\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\n\n  Background: A user exists\n    Given a user\n    And they are viewing the leaderboard\n\n  @motivating\n  Scenario Outline: Two types of referrals leaderboards can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with <value>\n    And there are started referrals on the tenant\n    And there are started converted on the tenant\n    When the user views the leaderboard\n    Then they see the referral <referralType> leaderboard\n\n    Examples:\n      | value                 | referralType |\n      | topStartedReferrers   | started      |\n      | topConvertedReferrers | converted    |\n\n  @motivating\n  Scenario: The top point earners leaderboard can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\n    And there are users with points\n    When the user views the leaderboard\n    Then they see the top point earners leaderboard\n    And text values are displayed for point counts\n\n  @minutia\n  Scenario Outline: Reward pretty value is used on the top point earners leaderboard\n    Given top point earners leaderboard\n    And the \"POINT\" reward unit has a pretty value for the following locales\n      | locale |\n      | en     |\n      | fr     |\n      | tr     |\n    When the user views the leaderboard\n    And they have <locale>\n    Then they see the translated pretty value in the stat value column\n\n  @motivating\n  Scenario Outline: Program Context is used by default to filter leaderboard results\n    Given a <leaderboardType> leaderboard loaded with program context for \"my-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Program Id context can be overwritten with a prop\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-test-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Global leaderboards can be displayed by clearing program context\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\n\t\t#This can also be done with a program section in a similar manner\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\n    When the user views the leaderboard\n    Then they see global <results>\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario: Leaderboard results are shown in descending order\n    Given there are leaderboard results\n    When the user views the leaderboard\n    Then they see up to the 10 top leaderboard results\n    And leaderboard is in descending order\n\n  @motivating\n  Scenario Outline: Leaderboard results can be filtered with a time interval\n    Given a <leaderboardType> leaderboard\n    And it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n    When the user views the leaderboard\n    Then they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Leaderboard rank type can be configured\n    Given a leaderboard has prop \"rank-type\" with <value>\n    When the user views the leaderboard\n    Then their leaderboard rank is their <rank>\n\n    Examples:\n      | value     | rank       |\n      | rowNumber | row number |\n      | denseRank | dense rank |\n      | rank      | rank       |\n\n  @minutia\n  Scenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\n    Given a leaderboard has prop \"max-rows\" with <value>\n    And the leaderboard has <resultCount>\n    When the user views the leaderboard\n    Then they see <number> rows\n\n    Examples:\n      | value | resultCount | number |\n      |       |          10 |     10 |\n      |     5 |          10 |      5 |\n      |     3 |           1 |      1 |\n      |    25 |          15 |     15 |\n\n  @minutiae @ui\n  Scenario: Leaderboards with no results show an empty state\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then an empty state is dislayed\n    And they see an image of a leaderboard\n    And below they see \"View your rank in the leaderboard\"\n    And below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\n    And the text is center aligned\n\n  @minutiae @ui\n  Scenario: A custom empty state can be provided\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then the contents of the \"empty\" slot are displayed\n\n  @minutiae @ui\n  Scenario: User is on Essentials plan\n    Given the user has an Essentials plan\n    When they view the leaderboard\n    Then a message telling them to upgrade their plan appears:\n      \"\"\"\n      Contact Support to upgrade your plan and start leveraging\n                gamification in your program.\n      \"\"\"\n    And an empty table image is displayed\n\n  @minutiae @ui\n  Scenario: Leaderboard headings can be customized\n    Given a leaderboard\n    And it has the following props\n      | prop         | value          |\n      | rankheading  | Place          |\n      | usersheading | Customer       |\n      | statsheading | Referral Count |\n      | show-rank    | true           |\n    When the user views the leaderboard\n    Then they see the following columns with headings\n      | column | heading        |\n      | rank   | Place          |\n      | user   | Customer       |\n      | stat   | Referral Count |\n\n  @motivating @ui\n  Scenario Outline: Leaderboard rank can be hidden or shown\n    Given a leaderboard\n    And it has prop \"show-rank\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the rank column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | see       |\n      | false     | don't see |\n      |           | don't see |\n\n    Scenario Outline: Users names can be hidden or shown\n    Given a leaderboard\n    And it has prop \"hide-names\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the referrer column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | don't see |\n      | false     | see       |\n      |           | see       |\n\n  @motivating @ui\n  Scenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\n    Given a user in the top 10 of the leaderboard results\n    When they view the leaderboard\n    Then they see the row with their name highlighted with brand colour\n\n  @motivating @ui\n  Scenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\n    Given a user <mayHave> completed actions counted by the leaderboard\n    And they are not in the top 10 leaderboard results\n    And the leaderboard has prop \"show-user\" with <value>\n    When they view the leaderboard\n    Then they <maySee> \"...\" under the top 10 leaderboard results\n    And under \"...\" they <maySee> a row highlighted with brand colour\n    And they <maySee> their name\n    And they <maySee> their leaderboard value\n    And they <maySeeRank>\n\n    Examples:\n      | mayHave | value | maySee    | maySeeRank           |\n      | has     | true  | see       | see their rank       |\n      | hasn't  | true  | see       | don't see their rank |\n      | N/A     | false | don't see | don't see their rank |\n      | hasn't  |       | see       | don't see their rank |\n\n  @minutiae\n  Scenario: Users without names are displayed as an \"Anonymous User\"\n    Given a user\n    And they do not have a first name\n    And they do not have a last initial\n    When they view the leaderboard\n    Then they see the user displayed as \"Anonymous User\"\n\n  @minutiae\n  Scenario Outline: If a user only has a first or last name, then only that is displayed\n    Given a user\n    And they only have a <name>\n    When they view the leaderboard\n    Then they only see their <name>\n\n    Examples:\n      | name      |\n      | firstName |\n      | lastName  |\n";
 
 const Leaderboard_stories = {
   title: "Components/Leaderboard",
@@ -2187,6 +2186,38 @@ const ReferralLeaderboard = () => {
   };
   return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
 };
+const ReferralLeaderboardWithMaxWidth = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        ...defaultStyles$1,
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: false,
+        maxWidth: "300px",
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        textValue: "82",
+        rank: 1,
+        rowNumber: 1,
+      },
+    },
+    elements: {
+      ...defaultElements$1,
+    },
+  };
+  return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
+};
 const PointsLeaderboard = () => {
   const props = {
     states: {
@@ -2366,6 +2397,7 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   One: One,
   Five: Five,
   ReferralLeaderboard: ReferralLeaderboard,
+  ReferralLeaderboardWithMaxWidth: ReferralLeaderboardWithMaxWidth,
   PointsLeaderboard: PointsLeaderboard,
   TenWithRank: TenWithRank,
   ViewerOutside: ViewerOutside,
@@ -3382,7 +3414,7 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   FullStackSuccess: FullStackSuccess
 });
 
-const EXCHANGE = index$1.dist.gql `
+const EXCHANGE = index_module.dist.gql `
   mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
     exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
       reward {
@@ -17632,7 +17664,7 @@ const StencilStorybook = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-require('./index.module-b1f9bdb8.js');
-const reRender = require('./re-render-95d86b86.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);
@@ -14,7 +14,7 @@ const TabView = ({}, children) => {
 const Tab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
-const reRender = require('./re-render-95d86b86.js');
-const useChildElements = require('./useChildElements-91b9f4ff.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
 const utils = require('./utils-6847bc06.js');
 
 const TabsView = ({ content, placement, }) => {
@@ -86,7 +86,7 @@ function useTabs() {
 const Tabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 
@@ -11,7 +11,7 @@ const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   componentWillLoad() { }

package/dist/cjs/{stencil-hooks.module-a5a04d8a.js → stencil-hooks.module-72742a0b.js}

@@ -1114,14 +1114,17 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 function s$2(){return index.getRenderingRef()}function l$1(){var e=s$2();return index.getElement(e)}function d$2(e,t){void 0===t&&(t={});var n=l$1();return h$1(n,e,t)}function m$2(e,t){var n=l$1();return y$1(n,e,t)}var p$1=browser("stencil-hook");function h$2(t){var r,u=index.getElement(t),c=(r=!1,new State(function(){p$1("Queue update on element",u),r||(r=!0,Promise.resolve().then(function(){p$1("Forced update on element",u),r=!1,index.forceUpdate(u);}));},u)),a=t.disconnectedCallback;if(!a)throw new Error("Stencil hooks requires `disconnectedCallback` to be defined (even if it's empty). This is because of how the Stencil compiler works internally");t.disconnectedCallback=function(){c.teardown(),v(a);};var i=t.connectedCallback;t.connectedCallback=function(){c.update(),v(i);};var f=t.render.bind(t);t.render=function(){var e=c.run(f);return c.runEffects(),e};}function v(e){"function"==typeof e&&e();}
 
 exports.browser = browser;
+exports.c = c;
 exports.commonjsGlobal = commonjsGlobal;
 exports.createCommonjsModule = createCommonjsModule;
 exports.d = d$2;
 exports.getAugmentedNamespace = getAugmentedNamespace;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-exports.h = h$2;
+exports.h = h$1;
+exports.h$1 = h$2;
 exports.l = l$1;
 exports.m = m$2;
+exports.s = s$1;
 exports.useEffect = useEffect;
 exports.useMemo = useMemo;
 exports.useReducer = useReducer;