@saasquatch/mint-components 1.5.0-49 → 1.5.0-52

package/dist/esm/{sqm-brand_26.entry.js → sqm-brand_27.entry.js}

@@ -1,22 +1,22 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-2c5a6587.js';
-import { m as h, u as useEffect, k as useState, f as useRef, y, b as browser, e as useReducer } from './stencil-hooks.module-1bcbec4f.js';
-import { h as autoColorScaleCss, C as CardFeedView, E as EditProfileView, c as PortalChangePasswordView, P as PortalFrameView, d as PortalLoginView, e as PortalRegisterView, R as ReferralIframeView, g as RewardExchangeView, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './AutoColor-9281c94b.js';
-import { g as getProps, a as getMissingProps } from './utils-1d345130.js';
-import { c as createStyleSheet } from './JSS-df9ea8a0.js';
-import { d as dist, i as ie, b as sn, q as qe, j as jn, r as rn, c as dn, g as $e, E as Ee, P, D as De, M, H as He, l as ln, R as Rn, A as An } from './index.module-983975d9.js';
-import { i as intl } from './global-cc738e38.js';
-import { c as cjs } from './cjs-bdfb4486.js';
-import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-72c8b457.js';
-import { u as useCallback } from './use-callback-cfeaefe1.js';
-import { p as pathToRegexp, u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-5450ce4c.js';
-import { a as useChildElements, b as useRequestRerender } from './useChildElements-9936fb9a.js';
-import './mixins-10353a39.js';
-import './sqm-portal-section-view-5a3d3829.js';
-import './sqm-text-span-view-be532a94.js';
-import './luxon-afa282c2.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
+import { m as h, u as useEffect, k as useState, f as useRef, y, b as browser, e as useReducer } from './stencil-hooks.module-2f159754.js';
+import { i as intl } from './global-6bd9287e.js';
+import { u as useCallback } from './use-callback-d8ef4b5d.js';
+import { d as dist, n as ne, b as mn, D as De, k, a as dn, p as pn, H as He, $ as $e, P, V as Ve, M, Q as Qe, h as hn, x, R } from './index.module-ec3dcc82.js';
 import './extends-c31f1eff.js';
+import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import './insertcss-bcaf3818.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { a as useChildElements, b as useRequestRerender } from './useChildElements-c11d6189.js';
+import './luxon-5fa22651.js';
+import { g as getProps, a as getMissingProps } from './utils-1d345130.js';
+import './sqm-text-span-view-7e61c95c.js';
+import { p as pathToRegexp, u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-e2295035.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-cf79ed90.js';
+import { h as autoColorScaleCss, C as CardFeedView, E as EditProfileView, c as PortalChangePasswordView, P as PortalFrameView, d as PortalLoginView, e as PortalRegisterView, R as ReferralIframeView, g as RewardExchangeView, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './AutoColor-5d891803.js';
+import './sqm-portal-section-view-d3098f7f.js';
 
 /**
  * Build a font CSS URL using the Google Fonts CSS API
@@ -31,7 +31,7 @@ function buildFontsCssUrl(...fonts) {
   return `https://fonts.googleapis.com/css2?${queryString}`;
 }
 
-let BrandComponent = class {
+const BrandComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     h(this);
@@ -77,7 +77,7 @@ let BrandComponent = class {
   }
 };
 
-let CardFeed = class {
+const CardFeed = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -149,7 +149,7 @@ function DividedLayoutView(props, children) {
     children));
 }
 
-let DividedLayout = class {
+const DividedLayout = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
@@ -208,13 +208,13 @@ const defaultFormState = {
   error: "",
 };
 function useEditProfile(props) {
-  const userIdent = ie();
+  const userIdent = ne();
   const [showEdit, setShowEdit] = useState(false);
-  useState("");
+  const [error, setError] = useState("");
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = sn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = qe(UPSERT_USER);
+  const userDataResponse = mn(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;
@@ -294,10 +294,9 @@ function useEditProfile(props) {
       },
       resetForm: () => {
         var _a, _b, _c, _d, _e, _f;
-        const currentRegion = ((_b = (_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.countryCode)
-          ? intl.formatDisplayName(userDataResponse.data.viewer.countryCode, {
-            type: "region",
-          })
+        const currentRegion = ((_b = (_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.countryCode) ? intl.formatDisplayName(userDataResponse.data.viewer.countryCode, {
+          type: "region",
+        })
           : "";
         setUserData({
           ...(_c = userDataResponse.data) === null || _c === void 0 ? void 0 : _c.viewer,
@@ -321,7 +320,7 @@ function useEditProfile(props) {
 
 const sqmEditProfileCss = ".ErrorStyles::part(base){background:var(--sl-color-danger-10);border-color:var(--sl-color-danger-500);outline:var(--sl-color-danger-500)}.ErrorStyles:host{--something-random:red;--focus-ring:0 0 0 var(--sl-focus-ring-width) red !important}.ErrorStyles::part(input){color:var(--sl-color-danger-500)}.ErrorStyles::part(input):-webkit-autofill,.ErrorStyles::part(input):-webkit-autofill:hover,.ErrorStyles::part(input):-webkit-autofill:focus,.ErrorStyles::part(input):-webkit-autofill:active{-webkit-box-shadow:0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;box-shadow:0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--sl-color-danger-500)}.ErrorStyles::part(help-text){color:var(--sl-color-danger-500)}:host{display:block}:host([hidden]){display:none}.FormWrapper>:not(:first-child){margin-top:54px}.FormSection{width:100%}.FormSection>:not(:first-child){margin-top:16px}.ButtonWrapper{display:-ms-flexbox;display:flex;margin-top:24px;-ms-flex-pack:end;justify-content:flex-end}.ButtonWrapper>:not(:first-child){margin-left:var(--sl-font-size-x-small)}.CardWrapper{-webkit-box-sizing:border-box;box-sizing:border-box;background:var(--sl-color-white);padding:40px 30px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width: 499px){.CardWrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}}@media screen and (max-width: 880px){.CardWrapper.ShowEdit{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}}";
 
-let EditProfile = class {
+const EditProfile = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -329,7 +328,7 @@ let EditProfile = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = jn()
+    const props = k()
       ? useEditProfileDemo(getProps(this))
       : useEditProfile(getProps(this));
     return h$1(EditProfileView, Object.assign({}, props));
@@ -390,20 +389,7 @@ function useEditProfileDemo(props) {
 }
 EditProfile.style = sqmEditProfileCss;
 
-let SqmHookStoryContainer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const Story = this.hookStory;
-    return h$1(Story, null);
-  }
-};
-
-function MediaView(props) {
+function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
   const style = {
@@ -426,13 +412,19 @@ function MediaView(props) {
       objectFit: "cover",
       margin: "auto",
     },
+    Background: {
+      minHeight: props.minHeight,
+      backgroundImage: `url(${props.imageUrl})`,
+      backgroundSize: "cover",
+      backgroundPosition: props.imagePos || "center",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
     Overlay: {
-      position: "absolute",
-      width: "90%",
-      top: "50%",
-      left: "50%",
+      zIndex: "1",
+      padding: "var(--sl-spacing-" + props.padding + ")",
       textAlign: "center",
-      transform: "translate(-50%, -50%)",
       color: props.textColor || "var(--sl-color-neutral-0)",
       lineHeight: "var(--sl-line-height-dense)",
     },
@@ -444,35 +436,37 @@ function MediaView(props) {
       color: props.textColor || "var(--sl-color-neutral-900)",
       "& .image-area": {
         width: "50%",
-        "@media (max-width: 499px)": {
+        boxSizing: "border-box",
+        "@media (max-width: 599px)": {
           width: "100%",
         },
       },
       "& .text-area": {
         width: "50%",
-        padding: "calc(2*var(--sl-spacing-xx-large))",
+        padding: "calc(2*var(--sl-spacing-" + props.padding + "))",
         alignSelf: "center",
-        "@media (max-width: 499px)": {
-          width: "90%",
+        boxSizing: "border-box",
+        "@media (max-width: 599px)": {
+          width: "100%",
           textAlign: "center",
-          padding: "var(--sl-spacing-xx-large)",
+          padding: "var(--sl-spacing-" + props.padding + ")",
         },
       },
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
       },
     },
     Header: {
       fontSize: "var(--sl-font-size-xxx-large)",
       fontWeight: "var(--sl-font-weight-bold)",
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         fontSize: "var(--sl-font-size-xx-large)",
       },
     },
     Description: {
       fontSize: "var(--sl-font-size-x-large)",
       margin: "var(--sl-spacing-small) 0",
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         fontSize: "var(--sl-font-size-large)",
       },
     },
@@ -481,7 +475,7 @@ function MediaView(props) {
       "&::part(base)": {
         padding: "0 var(--sl-spacing-x-large)",
       },
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         width: "100%",
       },
     },
@@ -499,14 +493,14 @@ function MediaView(props) {
     props.layout === "overlay" && OverlayView(),
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
-    return (h$1("div", null,
-      props.imageUrl && (h$1("img", { class: sheet.classes.Image, src: props.imageUrl })),
+    return (h$1("div", { class: sheet.classes.Background },
       h$1("div", { class: sheet.classes.Overlay },
         props.header && (h$1("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h$1("div", { class: sheet.classes.Description }, props.description)),
         props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
-            : window.open(props.buttonLink, "_parent") }, props.buttonText)))));
+            : window.open(props.buttonLink, "_parent") }, props.buttonText)),
+        children && children)));
   }
   function ColumnView() {
     return (h$1("div", null,
@@ -522,9 +516,13 @@ function MediaView(props) {
   }
 }
 
-let Media = class {
+const HeroImage = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @uiName Minimum Image Height
+     */
+    this.minHeight = "300px";
     /**
      * @uiName Overlay Color
      */
@@ -533,10 +531,6 @@ let Media = class {
      * @uiName Overlay Opacity
      */
     this.overlayOpacity = "0.75";
-    /**
-     * @uiName Minimum Image Height
-     */
-    this.minHeight = "300px";
     /**
      * @uiName Image Link
      * @uiType string
@@ -546,24 +540,92 @@ let Media = class {
     /**
      * @uiName Image Position
      * @uiType string
-     * @uiEnum ["left", "right"]
+     * @uiEnum ["left", "center", "right"]
      */
-    this.imagePos = "left";
+    this.imagePos = "center";
     /**
      * @uiName Image Mobile Position
      * @uiType string
-     * @uiEnum ["top", "bottom" ]
+     * @uiEnum ["top", "bottom"]
      */
     this.imageMobilePos = "top";
     /**
      * @uiName CTA Button Link Open in New Tab
      */
     this.buttonNewTab = false;
+    /**
+     * @uiName Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.padding = "xx-large";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h$1(HeroImageView, Object.assign({}, getProps(this)), h$1("slot", null)));
+  }
+};
+
+const SqmHookStoryContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    return h$1(MediaView, Object.assign({}, getProps(this)));
+    const Story = this.hookStory;
+    return h$1(Story, null);
+  }
+};
+
+function ImageView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      width: "100%",
+      justifyContent: props.align || "center",
+      background: props.backgroundColor || "",
+    },
+    Image: {
+      maxWidth: "100%",
+      objectFit: "cover",
+      marginLeft: props.left || "0",
+      marginRight: props.right || "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h$1("div", null,
+    h$1("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h$1("div", { class: sheet.classes.Container },
+      h$1("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+}
+
+const Image = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Position Alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.align = "center";
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h$1(ImageView, Object.assign({}, getProps(this)));
   }
 };
 
@@ -582,12 +644,12 @@ function NavigationMenuView(props) {
 }
 
 function handleMenu(e) {
-  dn.push(e.detail.item.value);
+  pn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
   const ref = useRef();
-  const [, rerender] = rn();
-  const user = ie();
+  const [, rerender] = dn();
+  const user = ne();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
@@ -608,7 +670,7 @@ function useNavigationMenu(props) {
 
 const sqmNavigationMenuCss = ":host{display:block}:host([hidden]){display:none}.HeaderWrapper{width:100%;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--sl-spacing-small) var(--sl-spacing-large);-ms-flex-align:center;align-items:center;background-color:var(--sqm-header-background)}@media screen and (max-width: 499px){.HeaderWrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:end;justify-content:flex-end;padding:0 var(--sl-spacing-x-small)}}";
 
-let NavigationMenu = class {
+const NavigationMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -616,7 +678,7 @@ let NavigationMenu = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = jn()
+    const props = k()
       ? useNavigationMenuDemo(getProps(this))
       : useNavigationMenu(getProps(this));
     return (h$1(Host, { slot: "sqm-navigation-menu" }, h$1(NavigationMenuView, Object.assign({}, props))));
@@ -641,11 +703,11 @@ NavigationMenu.style = sqmNavigationMenuCss;
 
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = $e();
+  const [request, { loading, errors, data }] = He();
   const [open, setOpen] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
-  const user = ie();
+  const user = ne();
   const submit = async (event) => {
     var _a;
     setSuccess(false);
@@ -698,7 +760,7 @@ function usePortalChangePassword(props) {
   };
 }
 
-let PortalChangePassword = class {
+const PortalChangePassword = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -738,7 +800,7 @@ let PortalChangePassword = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = jn()
+    const { states, callbacks } = k()
       ? usePortalChangePasswordDemo(this)
       : usePortalChangePassword(this);
     return h$1(PortalChangePasswordView, { states: states, callbacks: callbacks });
@@ -767,7 +829,7 @@ function usePortalChangePasswordDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-let PortalContainer = class {
+const PortalContainer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -802,7 +864,7 @@ let PortalContainer = class {
 };
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = rn();
+  const [, rerender] = dn();
   return {
     data: {
       footer: footerContent,
@@ -814,7 +876,7 @@ function usePortalFrame(footerContent, headerContent) {
   };
 }
 
-let PortalFrame = class {
+const PortalFrame = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -824,7 +886,7 @@ let PortalFrame = class {
   render() {
     const footerContent = h$1("slot", { name: "footer" });
     const headerContent = h$1("slot", { name: "header" });
-    const props = jn()
+    const props = k()
       ? usePortalFrameDemo(footerContent, headerContent, this)
       : usePortalFrame(footerContent, headerContent);
     return (h$1(PortalFrameView, Object.assign({}, props), h$1("slot", null)));
@@ -847,7 +909,7 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = Ee();
+  const [request, { loading, errors, data }] = $e();
   const [error, setError] = useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const nextPageOverride = urlParams.get("nextPage");
@@ -864,7 +926,7 @@ function usePortalLogin(props) {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
-      dn.push({
+      pn.push({
         pathname: nextPageOverride || props.nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
@@ -890,7 +952,7 @@ function usePortalLogin(props) {
   };
 }
 
-let PortalLogin = class {
+const PortalLogin = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -934,12 +996,12 @@ let PortalLogin = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = jn()
+    const { states, callbacks } = k()
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => dn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => dn.push(states.registerPath) }, this.registerLabel))),
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => pn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => pn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -1027,13 +1089,13 @@ function compare (a, b) {
   return !a[1] && b[1] ? 1 : a[1] && !b[1] ? -1 : 0;
 }
 
-function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties$5(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$5(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$5(Constructor.prototype, protoProps); if (staticProps) _defineProperties$5(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
 var V3 = '1.2.0'; // Moved `001` country code to "nonGeographic" section of metadata.
 
@@ -1048,14 +1110,14 @@ var Metadata =
 /*#__PURE__*/
 function () {
   function Metadata(metadata) {
-    _classCallCheck$5(this, Metadata);
+    _classCallCheck(this, Metadata);
 
     validateMetadata(metadata);
     this.metadata = metadata;
     setVersion.call(this, metadata);
   }
 
-  _createClass$5(Metadata, [{
+  _createClass(Metadata, [{
     key: "getCountries",
     value: function getCountries() {
       return Object.keys(this.metadata.countries).filter(function (_) {
@@ -1295,14 +1357,14 @@ var NumberingPlan =
 /*#__PURE__*/
 function () {
   function NumberingPlan(metadata, globalMetadataObject) {
-    _classCallCheck$5(this, NumberingPlan);
+    _classCallCheck(this, NumberingPlan);
 
     this.globalMetadataObject = globalMetadataObject;
     this.metadata = metadata;
     setVersion.call(this, globalMetadataObject.metadata);
   }
 
-  _createClass$5(NumberingPlan, [{
+  _createClass(NumberingPlan, [{
     key: "callingCode",
     value: function callingCode() {
       return this.metadata[0];
@@ -1455,13 +1517,13 @@ var Format =
 /*#__PURE__*/
 function () {
   function Format(format, metadata) {
-    _classCallCheck$5(this, Format);
+    _classCallCheck(this, Format);
 
     this._format = format;
     this.metadata = metadata;
   }
 
-  _createClass$5(Format, [{
+  _createClass(Format, [{
     key: "pattern",
     value: function pattern() {
       return this._format[0];
@@ -1529,13 +1591,13 @@ var Type =
 /*#__PURE__*/
 function () {
   function Type(type, metadata) {
-    _classCallCheck$5(this, Type);
+    _classCallCheck(this, Type);
 
     this.type = type;
     this.metadata = metadata;
   }
 
-  _createClass$5(Type, [{
+  _createClass(Type, [{
     key: "pattern",
     value: function pattern() {
       if (this.metadata.v1) return this.type;
@@ -1602,7 +1664,7 @@ function validateMetadata(metadata) {
 /* istanbul ignore next */
 
 var is_object = function is_object(_) {
-  return _typeof$1(_) === 'object';
+  return _typeof(_) === 'object';
 }; // Babel transforms `typeof` into some "branches"
 // so istanbul will show this as "branch not covered".
 
@@ -1610,7 +1672,7 @@ var is_object = function is_object(_) {
 
 
 var type_of = function type_of(_) {
-  return _typeof$1(_);
+  return _typeof(_);
 };
 /**
  * Returns "country calling code" for a country.
@@ -2221,9 +2283,9 @@ function getIddPrefix(country, callingCode, metadata) {
   }
 }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var DEFAULT_OPTIONS = {
   formatExtension: function formatExtension(formattedNumber, extension, metadata) {
     return "".concat(formattedNumber).concat(metadata.ext()).concat(extension);
@@ -2245,7 +2307,7 @@ var DEFAULT_OPTIONS = {
 function formatNumber(input, format, options, metadata) {
   // Apply default options.
   if (options) {
-    options = _objectSpread$1({}, DEFAULT_OPTIONS, options);
+    options = _objectSpread({}, DEFAULT_OPTIONS, options);
   } else {
     options = DEFAULT_OPTIONS;
   }
@@ -2277,7 +2339,7 @@ function formatNumber(input, format, options, metadata) {
         return '';
       }
 
-      number = formatNationalNumber$1(nationalNumber, input.carrierCode, 'NATIONAL', metadata, options);
+      number = formatNationalNumber(nationalNumber, input.carrierCode, 'NATIONAL', metadata, options);
       return addExtension(number, input.ext, metadata, options.formatExtension);
 
     case 'INTERNATIONAL':
@@ -2287,7 +2349,7 @@ function formatNumber(input, format, options, metadata) {
         return "+".concat(countryCallingCode);
       }
 
-      number = formatNationalNumber$1(nationalNumber, null, 'INTERNATIONAL', metadata, options);
+      number = formatNationalNumber(nationalNumber, null, 'INTERNATIONAL', metadata, options);
       number = "+".concat(countryCallingCode, " ").concat(number);
       return addExtension(number, input.ext, metadata, options.formatExtension);
 
@@ -2318,7 +2380,7 @@ function formatNumber(input, format, options, metadata) {
   }
 }
 
-function formatNationalNumber$1(number, carrierCode, formatAs, metadata, options) {
+function formatNationalNumber(number, carrierCode, formatAs, metadata, options) {
   var format = chooseFormatForNumber(metadata.formats(), number);
 
   if (!format) {
@@ -2373,7 +2435,7 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
   var fromCountryCallingCode = getCountryCallingCode(fromCountry, metadata.metadata); // When calling within the same country calling code.
 
   if (fromCountryCallingCode === countryCallingCode) {
-    var formattedNumber = formatNationalNumber$1(nationalNumber, carrierCode, 'NATIONAL', metadata); // For NANPA regions, return the national format for these regions
+    var formattedNumber = formatNationalNumber(nationalNumber, carrierCode, 'NATIONAL', metadata); // For NANPA regions, return the national format for these regions
     // but prefix it with the country calling code.
 
     if (countryCallingCode === '1') {
@@ -2395,25 +2457,25 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
   var iddPrefix = getIddPrefix(fromCountry, undefined, metadata.metadata);
 
   if (iddPrefix) {
-    return "".concat(iddPrefix, " ").concat(countryCallingCode, " ").concat(formatNationalNumber$1(nationalNumber, null, 'INTERNATIONAL', metadata));
+    return "".concat(iddPrefix, " ").concat(countryCallingCode, " ").concat(formatNationalNumber(nationalNumber, null, 'INTERNATIONAL', metadata));
   }
 }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
 
-function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties$4(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$4(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$4(Constructor.prototype, protoProps); if (staticProps) _defineProperties$4(Constructor, staticProps); return Constructor; }
+function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
 
 var PhoneNumber =
 /*#__PURE__*/
 function () {
   function PhoneNumber(countryCallingCode, nationalNumber, metadata) {
-    _classCallCheck$4(this, PhoneNumber);
+    _classCallCheck$1(this, PhoneNumber);
 
     if (!countryCallingCode) {
       throw new TypeError('`country` or `countryCallingCode` not passed');
@@ -2445,7 +2507,7 @@ function () {
     this.metadata = metadata;
   }
 
-  _createClass$4(PhoneNumber, [{
+  _createClass$1(PhoneNumber, [{
     key: "isPossible",
     value: function isPossible() {
       return isPossiblePhoneNumber(this, {
@@ -2485,7 +2547,7 @@ function () {
   }, {
     key: "format",
     value: function format(_format, options) {
-      return formatNumber(this, _format, options ? _objectSpread({}, options, {
+      return formatNumber(this, _format, options ? _objectSpread$1({}, options, {
         v2: true
       }) : {
         v2: true
@@ -2944,13 +3006,13 @@ function selectCountryFromList(possibleCountries, nationalPhoneNumber, metadata)
   }
 }
 
-function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties$3(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$3(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); if (staticProps) _defineProperties$3(Constructor, staticProps); return Constructor; }
+function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
 
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var AsYouTypeState =
 /*#__PURE__*/
@@ -2961,9 +3023,9 @@ function () {
     var onCountryChange = _ref.onCountryChange,
         onCallingCodeChange = _ref.onCallingCodeChange;
 
-    _classCallCheck$3(this, AsYouTypeState);
+    _classCallCheck$2(this, AsYouTypeState);
 
-    _defineProperty$1(this, "update", function (properties) {
+    _defineProperty$2(this, "update", function (properties) {
       for (var _i = 0, _Object$keys = Object.keys(properties); _i < _Object$keys.length; _i++) {
         var key = _Object$keys[_i];
         _this[key] = properties[key];
@@ -2974,7 +3036,7 @@ function () {
     this.onCallingCodeChange = onCallingCodeChange;
   }
 
-  _createClass$3(AsYouTypeState, [{
+  _createClass$2(AsYouTypeState, [{
     key: "reset",
     value: function reset(defaultCountry, defaultCallingCode) {
       this.international = false;
@@ -3190,7 +3252,7 @@ function formatNationalNumberWithAndWithoutNationalPrefixFormattingRule(state, f
   //
 
   if (shouldTryNationalPrefixFormattingRule(format)) {
-    var formattedNumber = formatNationalNumber(state, format, {
+    var formattedNumber = formatNationalNumber$1(state, format, {
       useNationalPrefixFormattingRule: true,
       getSeparatorAfterNationalPrefix: getSeparatorAfterNationalPrefix,
       metadata: metadata
@@ -3202,14 +3264,14 @@ function formatNationalNumberWithAndWithoutNationalPrefixFormattingRule(state, f
   } // Format the number without using `national_prefix_formatting_rule`.
 
 
-  return formatNationalNumber(state, format, {
+  return formatNationalNumber$1(state, format, {
     useNationalPrefixFormattingRule: false,
     getSeparatorAfterNationalPrefix: getSeparatorAfterNationalPrefix,
     metadata: metadata
   });
 }
 
-function formatNationalNumber(state, format, _ref3) {
+function formatNationalNumber$1(state, format, _ref3) {
   var metadata = _ref3.metadata,
       useNationalPrefixFormattingRule = _ref3.useNationalPrefixFormattingRule,
       getSeparatorAfterNationalPrefix = _ref3.getSeparatorAfterNationalPrefix;
@@ -3268,13 +3330,13 @@ function isValidFormattedNationalNumber(formattedNationalNumber, state) {
   return parseDigits(formattedNationalNumber) === state.getNationalDigits();
 }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties$3(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
+function _createClass$3(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); if (staticProps) _defineProperties$3(Constructor, staticProps); return Constructor; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 // Could be any digit, I guess.
 
 var DUMMY_DIGIT = '9'; // I don't know why is it exactly `15`
@@ -3288,7 +3350,7 @@ var LONGEST_DUMMY_PHONE_NUMBER = repeat(DUMMY_DIGIT, LONGEST_NATIONAL_PHONE_NUMB
 var NATIONAL_PREFIX_SEPARATORS_PATTERN = /[- ]/; // Deprecated: Google has removed some formatting pattern related code from their repo.
 // An example of a character class is "[1-4]".
 
-var CREATE_CHARACTER_CLASS_PATTERN = function () {
+var CREATE_CHARACTER_CLASS_PATTERN =  function () {
   return /\[([^\[\]])*\]/g;
 }; // Any digit in a regular expression that actually denotes a digit. For
 // example, in the regular expression "80[0-2]\d{6,10}", the first 2 digits
@@ -3297,7 +3359,7 @@ var CREATE_CHARACTER_CLASS_PATTERN = function () {
 // two-digit number, since the phone number can be as long as 15 digits.
 
 
-var CREATE_STANDALONE_DIGIT_PATTERN = function () {
+var CREATE_STANDALONE_DIGIT_PATTERN =  function () {
   return /\d(?=[^,}][^,}])/g;
 }; // A regular expression that is used to determine if a `format` is
 // suitable to be used in the "as you type formatter".
@@ -3349,9 +3411,9 @@ function () {
 
     var metadata = _ref.metadata;
 
-    _classCallCheck$2(this, AsYouTypeFormatter);
+    _classCallCheck$3(this, AsYouTypeFormatter);
 
-    _defineProperty(this, "getSeparatorAfterNationalPrefix", function (format) {
+    _defineProperty$3(this, "getSeparatorAfterNationalPrefix", function (format) {
       // `US` metadata doesn't have a `national_prefix_formatting_rule`,
       // so the `if` condition below doesn't apply to `US`,
       // but in reality there shoudl be a separator
@@ -3375,7 +3437,7 @@ function () {
       return '';
     });
 
-    _defineProperty(this, "shouldTryNationalPrefixFormattingRule", function (format, _ref2) {
+    _defineProperty$3(this, "shouldTryNationalPrefixFormattingRule", function (format, _ref2) {
       var international = _ref2.international,
           nationalPrefix = _ref2.nationalPrefix;
 
@@ -3395,7 +3457,7 @@ function () {
     this.resetFormat();
   }
 
-  _createClass$2(AsYouTypeFormatter, [{
+  _createClass$3(AsYouTypeFormatter, [{
     key: "resetFormat",
     value: function resetFormat() {
       this.chosenFormat = undefined;
@@ -3719,7 +3781,7 @@ function () {
       // (Though there's no such format in current metadata)
 
       /* istanbul ignore if */
-      if (format.pattern().indexOf('|') >= 0) {
+      if ( format.pattern().indexOf('|') >= 0) {
         return;
       } // Get formatting template for this phone number format
 
@@ -3954,19 +4016,19 @@ function () {
   return AsYouTypeFormatter;
 }();
 
-function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
-function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties$4(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
+function _createClass$4(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$4(Constructor.prototype, protoProps); if (staticProps) _defineProperties$4(Constructor, staticProps); return Constructor; }
 var VALID_FORMATTED_PHONE_NUMBER_DIGITS_PART = '[' + VALID_PUNCTUATION + VALID_DIGITS + ']+';
 var VALID_FORMATTED_PHONE_NUMBER_DIGITS_PART_PATTERN = new RegExp('^' + VALID_FORMATTED_PHONE_NUMBER_DIGITS_PART + '$', 'i');
 var VALID_FORMATTED_PHONE_NUMBER_PART = '(?:' + '[' + PLUS_CHARS + ']' + '[' + VALID_PUNCTUATION + VALID_DIGITS + ']*' + '|' + '[' + VALID_PUNCTUATION + VALID_DIGITS + ']+' + ')';
@@ -3985,7 +4047,7 @@ function () {
         metadata = _ref.metadata,
         onNationalSignificantNumberChange = _ref.onNationalSignificantNumberChange;
 
-    _classCallCheck$1(this, AsYouTypeParser);
+    _classCallCheck$4(this, AsYouTypeParser);
 
     this.defaultCountry = defaultCountry;
     this.defaultCallingCode = defaultCallingCode;
@@ -3993,11 +4055,11 @@ function () {
     this.onNationalSignificantNumberChange = onNationalSignificantNumberChange;
   }
 
-  _createClass$1(AsYouTypeParser, [{
+  _createClass$4(AsYouTypeParser, [{
     key: "input",
     value: function input(text, state) {
       var _extractFormattedDigi = extractFormattedDigitsAndPlus(text),
-          _extractFormattedDigi2 = _slicedToArray$1(_extractFormattedDigi, 2),
+          _extractFormattedDigi2 = _slicedToArray(_extractFormattedDigi, 2),
           formattedDigits = _extractFormattedDigi2[0],
           hasPlus = _extractFormattedDigi2[1];
 
@@ -4415,7 +4477,7 @@ function _extractFormattedDigitsAndPlus(text) {
 
 function extractFormattedDigitsAndPlus(text) {
   var _extractFormattedDigi3 = _extractFormattedDigitsAndPlus(text),
-      _extractFormattedDigi4 = _slicedToArray$1(_extractFormattedDigi3, 2),
+      _extractFormattedDigi4 = _slicedToArray(_extractFormattedDigi3, 2),
       formattedDigits = _extractFormattedDigi4[0],
       hasPlus = _extractFormattedDigi4[1]; // If the extracted phone number part
   // can possibly be a part of some valid phone number
@@ -4429,23 +4491,23 @@ function extractFormattedDigitsAndPlus(text) {
   return [formattedDigits, hasPlus];
 }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties$5(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass$5(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$5(Constructor.prototype, protoProps); if (staticProps) _defineProperties$5(Constructor, staticProps); return Constructor; }
 
-var AsYouType$1 =
+var AsYouType =
 /*#__PURE__*/
 function () {
   /**
@@ -4453,12 +4515,12 @@ function () {
    * @param {Object} metadata
    */
   function AsYouType(optionsOrDefaultCountry, metadata) {
-    _classCallCheck(this, AsYouType);
+    _classCallCheck$5(this, AsYouType);
 
     this.metadata = new Metadata(metadata);
 
     var _this$getCountryAndCa = this.getCountryAndCallingCode(optionsOrDefaultCountry),
-        _this$getCountryAndCa2 = _slicedToArray(_this$getCountryAndCa, 2),
+        _this$getCountryAndCa2 = _slicedToArray$1(_this$getCountryAndCa, 2),
         defaultCountry = _this$getCountryAndCa2[0],
         defaultCallingCode = _this$getCountryAndCa2[1];
 
@@ -4467,7 +4529,7 @@ function () {
     this.reset();
   }
 
-  _createClass(AsYouType, [{
+  _createClass$5(AsYouType, [{
     key: "getCountryAndCallingCode",
     value: function getCountryAndCallingCode(optionsOrDefaultCountry) {
       // Set `defaultCountry` and `defaultCallingCode` options.
@@ -4475,7 +4537,7 @@ function () {
       var defaultCallingCode; // Turns out `null` also has type "object". Weird.
 
       if (optionsOrDefaultCountry) {
-        if (_typeof(optionsOrDefaultCountry) === 'object') {
+        if (_typeof$1(optionsOrDefaultCountry) === 'object') {
           defaultCountry = optionsOrDefaultCountry.defaultCountry;
           defaultCallingCode = optionsOrDefaultCountry.defaultCallingCode;
         } else {
@@ -4835,18 +4897,18 @@ function () {
   return AsYouType;
 }();
 
-function AsYouType(country) {
-	return AsYouType$1.call(this, country, metadata)
+function AsYouType$1(country) {
+	return AsYouType.call(this, country, metadata)
 }
 
-AsYouType.prototype = Object.create(AsYouType$1.prototype, {});
-AsYouType.prototype.constructor = AsYouType;
+AsYouType$1.prototype = Object.create(AsYouType.prototype, {});
+AsYouType$1.prototype.constructor = AsYouType$1;
 
 function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f;
   const formRef = useRef(null);
   const { validationState, setValidationState } = useValidationState({});
-  const [request, { loading, errors, data }] = De();
+  const [request, { loading, errors, data }] = Ve();
   const submit = async (event) => {
     let formControls = event.target.getFormControls();
     let formData = {};
@@ -4905,13 +4967,13 @@ function usePortalRegister(props) {
     const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
     if (name !== "tel")
       return;
-    const asYouType = new AsYouType("US");
+    const asYouType = new AsYouType$1("US");
     e.target.value = asYouType.input(e.target.value);
   }, []);
   useEffect(() => {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-      dn.push(props.nextPage);
+      pn.push(props.nextPage);
     }
   }, [(_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
   useEffect(() => {
@@ -4953,7 +5015,7 @@ function usePortalRegister(props) {
   };
 }
 
-let PortalRegister = class {
+const PortalRegister = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -5011,12 +5073,12 @@ let PortalRegister = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks, refs } = jn()
+    const { states, callbacks, refs } = k()
       ? useRegisterDemo(this)
       : usePortalRegister(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => dn.push(states.loginPath) }, this.loginLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => pn.push(states.loginPath) }, this.loginLabel))),
       terms: h$1("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
@@ -5092,7 +5154,7 @@ function ProgramExplainerView(props, children) {
     h$1("div", { class: sheet.classes.Grid }, children)));
 }
 
-let ProgramExplainer = class {
+const ProgramExplainer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -5164,7 +5226,7 @@ function ProgramExplainerStepView(props) {
       h$1("div", { class: sheet.classes.Description }, props.description))));
 }
 
-let ProgramExplainerStep = class {
+const ProgramExplainerStep = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     h(this);
@@ -5175,14 +5237,14 @@ let ProgramExplainerStep = class {
   }
 };
 
-const debug$1 = browser('sq:useProgramMenu');
+const debug = browser('sq:useProgramMenu');
 const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
 function useProgramMenu(props) {
   const programId = M();
   const host = P();
-  debug$1({ programId, props });
+  debug({ programId, props });
   const ref = useRef();
-  const [, rerender] = rn();
+  const [, rerender] = dn();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
@@ -5206,7 +5268,7 @@ function useProgramMenu(props) {
   };
 }
 
-let ProgramMenu = class {
+const ProgramMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -5285,7 +5347,7 @@ function ReferralCardView(props) {
       h$1("div", { class: "right" }, props.slots.right))));
 }
 
-let ReferralCard = class {
+const ReferralCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -5325,8 +5387,8 @@ const GET_USER_DETAILS = dist.gql `
 function useReferralIframe(props) {
   var _a;
   const programId = M();
-  const user = ie();
-  const { data } = sn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const user = ne();
+  const { data } = mn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -5382,7 +5444,7 @@ function RequiredPropsError({ missingProps }) {
         h$1("strong", null, prop.attribute))))))));
 }
 
-let SqmReferralIframe = class {
+const SqmReferralIframe = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -5407,7 +5469,7 @@ let SqmReferralIframe = class {
     if (missingProps) {
       return h$1(RequiredPropsError, { missingProps: missingProps });
     }
-    const { states, data } = jn()
+    const { states, data } = k()
       ? useReferralIframeDemo(getProps(this))
       : useReferralIframe(getProps(this));
     return (h$1(Host, { style: { display: "contents" } }, h$1(ReferralIframeView, { data: data, states: states })));
@@ -6094,9 +6156,9 @@ function useRewardExchangeList(props) {
   });
   const [open, setOpen] = useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = ie();
-  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = qe(EXCHANGE);
-  const { data, loading, refetch, errors: queryError, } = sn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = De(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = mn(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) {
@@ -6116,7 +6178,7 @@ function useRewardExchangeList(props) {
       canvas.confetti || confetti.create(canvas, { resize: true, });
     canvas.confetti();
   }, [canvasRef.current]);
-  const { refresh } = He();
+  const { refresh } = Qe();
   async function exchangeReward() {
     if (!selectedItem)
       return;
@@ -6229,7 +6291,7 @@ function useRewardExchangeList(props) {
   };
 }
 
-let SqmRewardExchangeList = class {
+const SqmRewardExchangeList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -6354,7 +6416,7 @@ let SqmRewardExchangeList = class {
     // if (missingProps) {
     //   return <RequiredPropsError missingProps={missingProps} />;
     // }
-    const { states, data, callbacks, refs } = jn()
+    const { states, data, callbacks, refs } = k()
       ? useRewardExchangeListDemo(getProps(this))
       : useRewardExchangeList(getProps(this));
     return (h$1(Host, { style: { display: "contents" } }, h$1(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
@@ -6390,7 +6452,7 @@ function useRewardExchangeListDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const debug = browser("sq:useRouter");
+const debug$1 = browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
     return;
@@ -6398,7 +6460,7 @@ function matchPath(pattern, page) {
   return regexp.exec(page);
 }
 function useRouter() {
-  const location = ln();
+  const location = hn();
   const host = P();
   const [slot, setSlot] = useState(undefined);
   const [container, setContainer] = useState(undefined);
@@ -6418,7 +6480,7 @@ function useRouter() {
   useEffect(() => {
     var _a, _b;
     if (!container || !slot) {
-      debug("DOM not ready for navigation rendering on:", page);
+      debug$1("DOM not ready for navigation rendering on:", page);
       return;
     }
     // <template>
@@ -6433,7 +6495,7 @@ function useRouter() {
     });
     //@ts-ignore - can't access template attributes directly
     const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
-    debug({
+    debug$1({
       containerDatasetPage: container.dataset.page,
       templatePath,
       page,
@@ -6441,15 +6503,15 @@ function useRouter() {
     // if no routes found, and the old route doesn't match the new route
     if (!template) {
       // No matching page, display nothing
-      debug("No matching page found for ", page, ", so render nothing");
+      debug$1("No matching page found for ", page, ", so render nothing");
       container.innerHTML = "";
       container.dataset.page = page;
       return;
     }
-    debug("Page updated to ", page, template);
+    debug$1("Page updated to ", page, template);
     // if pathToRegexp results truthy or page is an exact match
     if (!!matchPath(templatePath, container.dataset.page)) {
-      debug("don't rerender");
+      debug$1("don't rerender");
       // Same page, do not re-render
       // Reduces dom mutations, speeds up page speed
     }
@@ -6468,7 +6530,7 @@ function useRouter() {
 
 const sqmRouterCss = "sqm-router{display:contents}";
 
-let SqmRouter = class {
+const SqmRouter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -6484,7 +6546,7 @@ SqmRouter.style = sqmRouterCss;
 
 const sqmShareButtonCss = ":host{display:block}:host([hidden]){display:none}sl-button{display:block}";
 
-let ShareButton = class {
+const ShareButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
@@ -6513,7 +6575,7 @@ let ShareButton = class {
   disconnectedCallback() { }
   render() {
     const thisProps = getProps(this);
-    const props = jn()
+    const props = k()
       ? useDemoShareButton(thisProps)
       : useShareButton(thisProps);
     return (h$1(ShareButtonView, Object.assign({}, props), h$1("slot", null)));
@@ -6548,10 +6610,10 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 function useShareCode(props) {
   var _a, _b;
   const programId = M();
-  const user = ie();
-  const engagementMedium = Rn();
-  const { data } = sn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = qe(WIDGET_ENGAGEMENT_EVENT);
+  const user = ne();
+  const engagementMedium = x();
+  const { data } = mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = De(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -6578,8 +6640,8 @@ function useShareCode(props) {
   return { ...props, onClick, open, shareString };
 }
 
-const DEFAULT_TOOLTIP_LIFESPAN$1 = 1000;
-let ShareCode = class {
+const DEFAULT_TOOLTIP_LIFESPAN = 1000;
+const ShareCode = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
@@ -6593,13 +6655,13 @@ let ShareCode = class {
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN$1;
+    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
     h(this);
   }
   disconnectedCallback() { }
   render() {
     const thisProps = getProps(this);
-    const props = jn()
+    const props = k()
       ? useDemoShareCode(thisProps)
       : useShareCode(thisProps);
     return h$1(ShareLinkView, Object.assign({}, props));
@@ -6622,8 +6684,8 @@ function useDemoShareCode(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const DEFAULT_TOOLTIP_LIFESPAN = 1000;
-let ShareLink = class {
+const DEFAULT_TOOLTIP_LIFESPAN$1 = 1000;
+const ShareLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
@@ -6637,13 +6699,13 @@ let ShareLink = class {
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
+    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN$1;
     h(this);
   }
   disconnectedCallback() { }
   render() {
     const thisProps = getProps(this);
-    const props = jn()
+    const props = k()
       ? useDemoShareLink(thisProps)
       : useShareLink(thisProps);
     return h$1(ShareLinkView, Object.assign({}, props));
@@ -6674,10 +6736,10 @@ const SEND_EVENT = dist.gql `
   }
 `;
 function useTaskCard(props) {
-  const user = ie();
-  const locale = An();
-  const [sendUserEvent, { data, loading: loadingEvent }] = qe(SEND_EVENT);
-  const { refresh } = He();
+  const user = ne();
+  const locale = R();
+  const [sendUserEvent, { data, loading: loadingEvent }] = De(SEND_EVENT);
+  const { refresh } = Qe();
   useEffect(() => {
     if (data) {
       refresh();
@@ -6707,7 +6769,7 @@ function useTaskCard(props) {
   };
 }
 
-let TaskCard = class {
+const TaskCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -6809,11 +6871,11 @@ let TaskCard = class {
   }
   disconnectedCallback() { }
   render() {
-    const { props } = jn()
+    const { props } = k()
       ? useDemoBigStat(this)
       : useBigStat({ ...getProps(this), programId: this.programId });
     const { value, loading } = props;
-    const { states, callbacks } = jn()
+    const { states, callbacks } = k()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
     return (h$1(TaskCardView, { callbacks: callbacks, states: {
@@ -6834,7 +6896,7 @@ function useTaskCardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-let Timeline = class {
+const Timeline = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -6850,7 +6912,12 @@ let Timeline = class {
   render() {
     //@ts-ignore
     const rewards = useChildElements();
-    rewards.forEach((reward) => (reward.icon = this.icon));
+    rewards.forEach((reward, idx) => {
+      if (rewards.length > 1 && idx != rewards.length - 1) {
+        reward.line = true;
+      }
+      reward.icon = this.icon;
+    });
     const vanillaStyle = `
 		:host{
 			display: block;   
@@ -6859,7 +6926,7 @@ let Timeline = class {
 		// ::slotted(*:not(:only-child):not(:last-child)) {
 		// 	margin-bottom: var(--sl-spacing-xx-large);
 		// }
-		
+
 		// ::slotted(*:not(:only-child):not(:last-child))::before {
 		// 	display: block;
 		// 	content: "";
@@ -6883,20 +6950,20 @@ let Timeline = class {
 
 
     // ZH: Temporary Patch fix
-    ::slotted(*:not(:first-child))::before {
-			display: block;
-			position: relative;
-			content: "";
-			background: var(--sl-color-primary-300);
-			min-height: 150px;
-			max-height: 300px;
-			width: 4px;
-			top: 12px;
-			left: 10px;
-			margin-top: -85px;
-			margin-bottom: 8px;
-			border-radius: 4px;
-		}
+    // ::slotted(*:not(:first-child))::before {
+	// 		display: block;
+	// 		position: relative;
+	// 		content: "";
+	// 		background: var(--sl-color-primary-300);
+	// 		min-height: 150px;
+	// 		max-height: 300px;
+	// 		width: 4px;
+	// 		top: 12px;
+	// 		left: 10px;
+	// 		margin-top: -85px;
+	// 		margin-bottom: 8px;
+	// 		border-radius: 4px;
+	// 	}
 	`;
     return (h$1("div", null, h$1("style", { type: "text/css" }, vanillaStyle), h$1("slot", null)));
   }
@@ -6910,7 +6977,7 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-let TimelineReward = class {
+const TimelineReward = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -6928,6 +6995,21 @@ let TimelineReward = class {
       TimelineReward: {
         color: "var(--sl-color-neutral-900)",
         lineHeight: "var(--sl-line-height-dense)",
+        "& .container": {
+          display: "flex",
+        },
+        "& .line": {
+          color: "transparent",
+          userSelect: "none",
+          background: "var(--sl-color-primary-300)",
+          width: "4px",
+          borderRadius: "4px",
+          margin: "-2px",
+          position: "relative",
+          left: "12px",
+          transform: "scaleY(0.95)",
+          top: "16px",
+        },
         "& .step": {
           display: "flex",
           minHeight: "100px",
@@ -6950,13 +7032,7 @@ let TimelineReward = class {
         },
         "& .description": {
           fontSize: "var(--sl-font-size-large)",
-        },
-        "& .line": {
-          height: "50px",
-          position: "relative",
-          left: "10px",
-          top: "-32px",
-          color: "var(--sl-color-primary-300)",
+          marginBottom: "var(--sl-spacing-xx-large)",
         },
       },
     };
@@ -6968,7 +7044,7 @@ let TimelineReward = class {
 	}
 	`;
     useRequestRerender([this.reward]);
-    return (h$1("div", { class: sheet.classes.TimelineReward }, h$1("style", { type: "text/css" }, styleString, vanillaStyle), h$1("div", { class: "step" }, this.icon === "gift" && (h$1("div", { class: "icon" }, h$1(Gift, null))), this.icon === "circle" && (h$1("div", { class: "icon" }, h$1(Circle, null))), h$1("div", null, h$1("div", null, h$1("span", { class: "reward" }, this.reward), h$1("span", { class: "unit" }, this.unit)), h$1("div", { class: "description" }, this.desc)))));
+    return (h$1("div", { class: sheet.classes.TimelineReward }, h$1("style", { type: "text/css" }, styleString, vanillaStyle), h$1("div", { class: "container" }, this.line && h$1("div", { class: "line" }, "."), h$1("div", { class: "step" }, this.icon === "gift" && (h$1("div", { class: "icon" }, h$1(Gift, null))), this.icon === "circle" && (h$1("div", { class: "icon" }, h$1(Circle, null))), h$1("div", null, h$1("div", null, h$1("span", { class: "reward" }, this.reward), h$1("span", { class: "unit" }, this.unit)), h$1("div", { class: "description" }, this.desc))))));
   }
 };
 
@@ -6988,8 +7064,8 @@ const GET_USER_NAME = dist.gql `
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const user = ie();
-  const res = sn(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne();
+  const res = mn(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}`
@@ -7001,7 +7077,7 @@ function useUserName(props) {
   };
 }
 
-let UserName = class {
+const UserName = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this._ignored = true;
@@ -7017,7 +7093,7 @@ let UserName = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = jn() ? useUserNameDemo(this) : useUserName(this);
+    const props = k() ? useUserNameDemo(this) : useUserName(this);
     return h$1(UserNameView, Object.assign({}, props));
   }
 };
@@ -7029,4 +7105,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BrandComponent as sqm_brand, CardFeed as sqm_card_feed, DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, SqmHookStoryContainer as sqm_hook_story_container, Media as sqm_media, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalContainer as sqm_portal_container, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BrandComponent as sqm_brand, CardFeed as sqm_card_feed, DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalContainer as sqm_portal_container, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };