@saasquatch/mint-components 1.5.0-0 → 1.5.0-1

package/dist/esm/sqm-divided-layout_30.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, c as Host, d as getAssetPath } from './index-17b4da69.js';
 import { m as h$1, j as useState, e as useEffect, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, c as createCommonjsModule, a as commonjsGlobal, k as useMemo } from './extends-3a3f9fe2.js';
-import { i as intl, a as insertCSS } from './global-90da933f.js';
+import { i as intl, a as insertCSS } from './global-e0e25c22.js';
 import { u as useCallback } from './use-callback-b38a1523.js';
-import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne, A as A$1 } from './index.module-90d2c3ad.js';
+import { d as dist, n as ne$1, c as cn, D as De, j as j$1, a as sn, b as mn, H as He, $ as $e, S as S$1, V as Ve, M as M$1, p as pn, v as vn, x as x$1, e as D$1, Y, z as ze, A as A$1 } from './index.module-eb50a8d2.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as getProps, a as getMissingProps } from './utils-454405f5.js';
@@ -11,21 +11,21 @@ import { E as ErrorStyles, H as HostBlock, A as AuthWrapper, a as AuthColumn, b
 import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-f0876545.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-47844836.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-e06f2f7f.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-c3b955b7.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-cd1e8962.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-6d5b856e.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-d227b2f9.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
-import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-a3f510db.js';
+import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-558fabb7.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-f2304ad9.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-2d8c368c.js';
 import { S as StatContainerView } from './sqm-stat-container-view-4133feb6.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-b67467b4.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-f1deea0f.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8cefe480.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-2af31979.js';
 import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-a4e50da2.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 import { A as AssetCardView } from './sqm-asset-card-view-6f360937.js';
-import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-d9fe0bf8.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-60cd9ae5.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
 
@@ -194,13 +194,13 @@ const defaultFormState = {
   error: "",
 };
 function useEditProfile(props) {
-  const userIdent = T$1();
+  const userIdent = ne$1();
   const [showEdit, setShowEdit] = useState(false);
   const [error, setError] = useState("");
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = en(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = be(UPSERT_USER);
+  const userDataResponse = cn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = De(UPSERT_USER);
   useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
@@ -426,12 +426,12 @@ function NavigationMenuView(props) {
 }
 
 function handleMenu(e) {
-  rn.push(e.detail.item.value);
+  mn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
   const ref = useRef();
-  const [, rerender] = Ze();
-  const user = T$1();
+  const [, rerender] = sn();
+  const user = ne$1();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
@@ -1125,11 +1125,11 @@ function PortalChangePasswordView(props) {
 
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = De();
+  const [request, { loading, errors, data }] = He();
   const [open, setOpen] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
-  const user = T$1();
+  const user = ne$1();
   const submit = async (event) => {
     var _a;
     setSuccess(false);
@@ -1304,7 +1304,7 @@ function PortalFrameView(props, children) {
 }
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = Ze();
+  const [, rerender] = sn();
   return {
     data: {
       footer: footerContent,
@@ -1392,7 +1392,7 @@ function PortalLoginView(props) {
 
 function usePortalLogin({ nextPage }) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = qe();
+  const [request, { loading, errors, data }] = $e();
   const [error, setError] = useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const nextPageOverride = urlParams.get("nextPage");
@@ -1409,7 +1409,7 @@ function usePortalLogin({ nextPage }) {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
-      rn.push({
+      mn.push({
         pathname: nextPageOverride || nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
@@ -1473,8 +1473,8 @@ const PortalLogin = class {
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (h("slot", { name: "forgotPassword" }, h("a", { onClick: () => rn.push("/forgotPassword") }, this.forgotPasswordLabel))),
-      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/register") }, this.registerLabel))),
+      forgotPasswordButton: (h("slot", { name: "forgotPassword" }, h("a", { onClick: () => mn.push("/forgotPassword") }, this.forgotPasswordLabel))),
+      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/register") }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -1567,7 +1567,7 @@ function PortalRegisterView(props) {
 
 const CONTEXT_NAME$1 = "sq:validation-state";
 function useValidationState(formState) {
-  const host = P$1();
+  const host = S$1();
   const [validationState, setValidationState] = y$1(host, CONTEXT_NAME$1, formState);
   return { validationState, setValidationState };
 }
@@ -5447,7 +5447,7 @@ function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f;
   const formRef = useRef(null);
   const { validationState, setValidationState } = useValidationState({});
-  const [request, { loading, errors, data }] = Ee();
+  const [request, { loading, errors, data }] = Ve();
   const submit = async (event) => {
     let formControls = event.target.getFormControls();
     let formData = {};
@@ -5510,7 +5510,7 @@ function usePortalRegister(props) {
   useEffect(() => {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-      rn.push(props.nextPage);
+      mn.push(props.nextPage);
     }
   }, [(_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
   useEffect(() => {
@@ -5604,7 +5604,7 @@ const PortalRegister = class {
       : usePortalRegister(this);
     const content = {
       formData: h("slot", { name: "formData" }),
-      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/login") }, this.loginLabel))),
+      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/login") }, this.loginLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -5639,10 +5639,10 @@ const debug = browser('sq:useProgramMenu');
 const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
 function useProgramMenu(props) {
   const programId = M$1();
-  const host = P$1();
+  const host = S$1();
   debug({ programId, props });
   const ref = useRef();
-  const [, rerender] = Ze();
+  const [, rerender] = sn();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
@@ -5691,8 +5691,8 @@ const GET_USER_DETAILS = dist.gql `
 function useReferralIframe(props) {
   var _a;
   const programId = M$1();
-  const user = T$1();
-  const { data } = en(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const user = ne$1();
+  const { data } = cn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -5756,7 +5756,7 @@ const styleString$5 = sheet$5.toString();
 function RequiredPropsError({ missingProps }) {
   if (!missingProps)
     return false;
-  const host = P$1();
+  const host = S$1();
   const [detailsOpen, setDetailsOpen] = useState(false);
   return (h("sl-alert", { type: "danger", open: true, class: sheet$5.classes.Alert },
     h("style", { type: "text/css" }, styleString$5),
@@ -5873,7 +5873,7 @@ function ReferralTableView(props) {
 }
 
 function useChildElements() {
-  const host = P$1();
+  const host = S$1();
   const initialState = host.children.length ? Array.from(host.children) : [];
   const [childElements, setChildElements] = useState(initialState);
   useEffect(() => {
@@ -6046,7 +6046,7 @@ const GET_REFERRAL_DATA = gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b;
-  const user = T$1();
+  const user = ne$1();
   const programIdContext = M$1();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -6069,13 +6069,13 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = en(GET_REFERRER_DATA, {
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = cn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = sn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = pn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -14778,6 +14778,7 @@ const GET_EXCHANGE_LIST = dist.gql `
               destinationValue
               prettyDestinationValue
               available
+              globalRewardKey
               unavailableReasonCode
             }
           }
@@ -14810,9 +14811,9 @@ function useRewardExchangeList(props) {
     exchangeError: false,
   });
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = T$1();
-  const [exchange, { data: exchangeResponse, errors }] = be(EXCHANGE);
-  const { data, loading, refetch } = en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne$1();
+  const [exchange, { data: exchangeResponse, errors }] = De(EXCHANGE);
+  const { data, loading, refetch } = cn(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
@@ -14829,6 +14830,7 @@ function useRewardExchangeList(props) {
       accountId: user === null || user === void 0 ? void 0 : user.accountId,
       userId: user.id,
     };
+    console.log({ selectedItem, selectedStep });
     switch (selectedItem.ruleType) {
       case "FIXED_GLOBAL_REWARD":
         exchangeVariables = {
@@ -14840,6 +14842,16 @@ function useRewardExchangeList(props) {
           globalRewardKey: selectedItem.globalRewardKey,
         };
         break;
+      case "STEPPED_FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedStep.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedStep.globalRewardKey,
+        };
+        break;
       case "VARIABLE_GLOBAL_REWARD":
         exchangeVariables = {
           ...exchangeVariables,
@@ -15310,7 +15322,7 @@ function RewardExchangeView(props) {
           gap: "20px",
           gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
         } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        var _a, _b;
+        var _a, _b, _c;
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
             ? "0 0 0 2px var(--sl-color-primary-500)"
@@ -15323,7 +15335,9 @@ function RewardExchangeView(props) {
         };
         const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
           ? item.prettySourceValue
-          : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
+          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
+            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${item.steps.slice(-1).pop().prettySourceValue}`
+            : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
         return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
           h("sl-card", { class: sheet.classes.KutayCard, style: {
               cursor: item.unavailableReasonCode
@@ -15352,7 +15366,7 @@ function RewardExchangeView(props) {
                 h("div", { class: "amount" }, amount),
                 item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
                   id: "unavailableCode",
-                  defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+                  defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.notAvailableError,
                 }, {
                   unavailableReason: item.unavailableReason ||
                     item.unavailableReasonCode,
@@ -15372,7 +15386,7 @@ function RewardExchangeView(props) {
       h("div", null, h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
           getAssetPath("./assets/placeholder.png") })),
       h("div", { class: sheet.classes.ChooseAmount },
-        h("div", { class: "title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
+        h("div", { class: "title" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""),
         ((_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
         ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", { class: "points" }, input)),
         h("div", { class: "space" })),
@@ -15405,8 +15419,8 @@ function RewardExchangeView(props) {
                 lineHeight: "18px",
                 alignSelf: "center",
               } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
-              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)
-              : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)))),
+              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""
+              : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || "")))),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
         h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
@@ -15639,7 +15653,7 @@ const GET_REWARDS = gql `
 `;
 function useRewardsTable(props, emptyElement, loadingElement) {
   var _a, _b;
-  const user = T$1();
+  const user = ne$1();
   const programIdContext = M$1();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -15662,7 +15676,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const { envelope: rewardsData, states, callbacks, } = sn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.rewards; }, {
+  const { envelope: rewardsData, states, callbacks, } = pn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.rewards; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -15865,8 +15879,8 @@ function matchPath(pattern, page) {
   return regexp.exec(page);
 }
 function useRouter() {
-  const location = an();
-  const host = P$1();
+  const location = vn();
+  const host = S$1();
   const [slot, setSlot] = useState(undefined);
   const [container, setContainer] = useState(undefined);
   const page = location.pathname;
@@ -16025,14 +16039,14 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : M$1();
-  const user = T$1();
+  const user = ne$1();
   const variables = {
     engagementMedium: x$1(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = en(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = cn(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = D$1();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -16122,8 +16136,8 @@ const MessageLinkQuery$1 = dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = M$1() } = props;
-  const user = T$1();
-  const { data } = en(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne$1();
+  const { data } = cn(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -17967,36 +17981,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => rn.push("/") }, "/"),
-    h("button", { onClick: () => rn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => rn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => rn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => rn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => rn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => rn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => rn.back() }, "Back"),
-    h("button", { onClick: () => rn.forward() }, "Forward"),
+    h("button", { onClick: () => mn.push("/") }, "/"),
+    h("button", { onClick: () => mn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => mn.push("/bar") }, "/bar"),
+    h("button", { onClick: () => mn.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => mn.push("/refer") }, "/refer"),
+    h("button", { onClick: () => mn.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => mn.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => mn.back() }, "Back"),
+    h("button", { onClick: () => mn.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => rn.push("/") }, "/"),
-    h("button", { onClick: () => rn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => rn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => rn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => rn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => rn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => rn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => rn.back() }, "Back"),
-    h("button", { onClick: () => rn.forward() }, "Forward"),
+    h("button", { onClick: () => mn.push("/") }, "/"),
+    h("button", { onClick: () => mn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => mn.push("/bar") }, "/bar"),
+    h("button", { onClick: () => mn.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => mn.push("/refer") }, "/refer"),
+    h("button", { onClick: () => mn.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => mn.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => mn.back() }, "Back"),
+    h("button", { onClick: () => mn.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => rn.push("/") }, "/"),
-    h("button", { onClick: () => rn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => mn.push("/") }, "/"),
+    h("button", { onClick: () => mn.push("/foo") }, "/foo"),
     h("hr", null),
     h("div", { style: { display: "flex", justifyContent: "space-around" } },
       h("sqm-router", { innerHTML: `<template path="/">
@@ -18010,7 +18024,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    rn.push(e.target.value);
+    mn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -18153,8 +18167,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = an()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: rn.back }, "Go Back")));
+        h("strong", null, (_a = vn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: mn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -18178,8 +18192,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = an()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: rn.back }, "Go Back")));
+        h("strong", null, (_a = vn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: mn.back }, "Go Back")));
 };
 
 const PortalFrame$1 = /*#__PURE__*/Object.freeze({
@@ -18273,14 +18287,14 @@ function setupGraphQL$1() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18335,14 +18349,14 @@ function setupGraphQL$2() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18397,14 +18411,14 @@ function setupGraphQL$3() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18528,14 +18542,14 @@ function setupGraphQL$4() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18575,14 +18589,14 @@ function setupGraphQL$5() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18702,14 +18716,14 @@ function setupGraphQL$6() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
   return { id, accountId };
@@ -18718,7 +18732,7 @@ function useExchangeButton() {
   const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = useState(10);
   const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = Ne(EXCHANGE$1);
+  const [exchange, { data, errors }] = ze(EXCHANGE$1);
   return {
     states: {
       points,
@@ -18833,14 +18847,14 @@ function setupGraphQL$7() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
   return { id, accountId };
@@ -18880,14 +18894,14 @@ function setupGraphQL$8() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
   return { id, accountId };
@@ -21312,6 +21326,7 @@ function ProgressBarView(props) {
   }
   const style = {
     ProgressBar: {
+      marginTop: steps ? "calc(-1*var(--sl-spacing-x-small))" : "",
       "& .progress-bar": {
         height: "0",
         marginTop: steps
@@ -21573,6 +21588,42 @@ function ProgressBarView(props) {
         }
       }
     }
+    // finite repetition hit
+    else if (finite && repetitions >= finite) {
+      let ratio = 1 / goal;
+      if (repetitions > 2) {
+        columns += "0fr 0fr ";
+        items.push(h("div", { class: "progress bg" }, goal * (finite - 2)));
+        items.push(h("div", { class: "gift start" }, gift1));
+      }
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i > progress) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
+            items.push(h("div", { class: "gift bw" }, gift1));
+          }
+        }
+        else if (i == goal) {
+          columns += "0fr ";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
+          items.push(h("div", { class: "gift" }, gift2));
+        }
+        else if (i == goal * 2) {
+          columns += "0fr 0fr";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, goal * finite));
+          items.push(h("div", { class: "gift" }, gift3));
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i + goal * (finite - 2)));
+        }
+      }
+    }
     // case repetition many
     else {
       let position = (progress % goal) + goal;
@@ -21629,7 +21680,7 @@ function TaskCardView(props) {
         minWidth: "347px",
         background: "var(--sl-color-neutral-0)",
         border: "1px solid var(--sl-color-neutral-200)",
-        borderRadius: "var(--sl-border-radius-large)",
+        borderRadius: "var(--sl-border-radius-medium)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: "var(--sl-color-neutral-600)",
@@ -21643,7 +21694,7 @@ function TaskCardView(props) {
         background: "var(--sl-color-neutral-50)",
       },
       "& .title": {
-        fontSize: "var(--sl-font-size-small)",
+        fontSize: "var(--sl-font-size-medium)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-neutral-950)",
       },
@@ -21660,12 +21711,14 @@ function TaskCardView(props) {
     Expired: {
       margin: "var(--sl-spacing-medium)",
       marginBottom: "calc(var(--sl-spacing-x-small)*-1)",
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sl-color-warning-600)",
       fontWeight: "var(--sl-font-weight-semibold)",
     },
     Header: {
       display: "flex",
       "& .icon": {
+        position: "relative",
+        top: "5%",
         alignSelf: "center",
         lineHeight: "0",
         color: "var(--sl-color-primary-400)",
@@ -21702,7 +21755,7 @@ function TaskCardView(props) {
       "& .icon": {
         fontSize: "var(--sl-font-size-xx-small)",
         marginRight: "var(--sl-spacing-xx-small)",
-        verticalAlign: "bottom",
+        verticalAlign: "middle",
       },
       "& .text": {
         marginTop: "auto",
@@ -21762,9 +21815,9 @@ function TaskCardView(props) {
       h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
         h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
-          h("span", { class: taskUnavailable ? "value black" : "value black" }, props.rewardAmount),
+          h("span", { class: "value" }, props.rewardAmount),
           h("span", { class: "text" }, props.rewardUnit)))),
-        props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: taskUnavailable ? "title black" : "title black" }, props.cardTitle)),
+        props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title" }, props.cardTitle)),
         props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (h(Details, Object.assign({}, props))),
         props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
         h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
@@ -22053,38 +22106,34 @@ const TaskCardRepeatableFinite = () => {
     h("div", { style: resizable },
       h("h4", null, "One Action"),
       h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true, finite: 2 })),
-      " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true, finite: 2 })),
-      " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, oneAction, { progress: 2, repeatable: true, finite: 2 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 2, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12, repeatable: true, finite: 3 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 15, repeatable: true, finite: 3 })),
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true, finite: 2 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 200, repeatable: true, finite: 2 })),
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true, finite: 2 })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 950, repeatable: true, finite: 2 })),
-      h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1300, repeatable: true, finite: 3 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200, repeatable: true, finite: 3 })),
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1500, repeatable: true, finite: 3 })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 3 })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 4 })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 5 })),
       h("h5", null))));
 };
 const TaskCardEndDate = () => {
@@ -25370,16 +25419,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      h("button", { onClick: () => rn.push("/") }, "Dashboard"),
-      props.leadSubmit && (h("button", { onClick: () => rn.push("/refer") }, "Submit a Referral")),
-      h("button", { onClick: () => rn.push("/activity") }, "Activity"),
-      h("button", { onClick: () => rn.push("/editProfile") }, "Edit Profile"),
-      h("button", { onClick: () => rn.push("/login") }, "Login"),
-      h("button", { onClick: () => rn.push("/register") }, "Register"),
-      h("button", { onClick: () => rn.push("/emailVerification") }, "Email Verification"),
-      h("button", { onClick: () => rn.push("/verifyEmail") }, "Verify Email"),
-      h("button", { onClick: () => rn.push("/forgotPassword") }, "Forgot Password"),
-      h("button", { onClick: () => rn.push("/resetPassword") }, "Reset Password")),
+      h("button", { onClick: () => mn.push("/") }, "Dashboard"),
+      props.leadSubmit && (h("button", { onClick: () => mn.push("/refer") }, "Submit a Referral")),
+      h("button", { onClick: () => mn.push("/activity") }, "Activity"),
+      h("button", { onClick: () => mn.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => mn.push("/login") }, "Login"),
+      h("button", { onClick: () => mn.push("/register") }, "Register"),
+      h("button", { onClick: () => mn.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => mn.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => mn.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => mn.push("/resetPassword") }, "Reset Password")),
     h("br", null),
     h("div", { innerHTML: states.previewTemplate })));
 }
@@ -29363,6 +29412,20 @@ const NYTimes = `
     ${autoColorScaleCss("black")}
     --sl-font-sans: Georgia, 'Times New Roman', serif;
 }
+`;
+const Klip = `
+:root{
+	--sl-color-primary-50: #E8E5F8;
+    --sl-color-primary-100: #C6BEED;
+    --sl-color-primary-200: #A192E2;
+    --sl-color-primary-300: #7B66D6;
+    --sl-color-primary-400: #5E46CD;
+    --sl-color-primary-500: #4225C4;
+    --sl-color-primary-600: #3C21BE;
+    --sl-color-primary-700: #331BB6;
+    --sl-color-primary-800: #2B16AF;
+    --sl-color-primary-900: #1D0DA2;
+}
 `;
 
 const Themes = /*#__PURE__*/Object.freeze({
@@ -29371,7 +29434,8 @@ const Themes = /*#__PURE__*/Object.freeze({
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
-  NYTimes: NYTimes
+  NYTimes: NYTimes,
+  Klip: Klip
 });
 
 function deepFreeze(obj) {
@@ -32229,8 +32293,8 @@ const GET_USER_NAME = gql `
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const user = T$1();
-  const res = en(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne$1();
+  const res = cn(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const loading = res.loading;
   const username = ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.firstName) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.lastName)
     ? `${(_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.firstName} ${(_h = (_g = res.data) === null || _g === void 0 ? void 0 : _g.viewer) === null || _h === void 0 ? void 0 : _h.lastName}`