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

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

@@ -2,25 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d8fa5d8e.js');
-const stencilHooks_module = require('./stencil-hooks.module-23a5a83a.js');
-const AutoColor = require('./AutoColor-a489ed67.js');
-const utils = require('./utils-01dbfd4a.js');
-const JSS = require('./JSS-24a85193.js');
-const index_module = require('./index.module-0f10a4c4.js');
-const global = require('./global-32bf222f.js');
-const cjs = require('./cjs-1066ec21.js');
-const jsonpointer = require('./jsonpointer-11327262.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-a78ab7ca.js');
-const useCallback = require('./use-callback-867e51f6.js');
-const useDemoBigStat = require('./useDemoBigStat-1fa1ca6a.js');
-const useChildElements = require('./useChildElements-6f8aa7de.js');
-require('./mixins-7b7c59fe.js');
-require('./sqm-portal-section-view-073d9dda.js');
-require('./sqm-text-span-view-dd99633a.js');
-require('./luxon-751f2e1c.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const global = require('./global-08276663.js');
+const useCallback = require('./use-callback-e754042f.js');
+const index_module = require('./index.module-54724339.js');
 require('./extends-08099afd.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
 require('./insertcss-04580cfa.js');
+const cjs = require('./cjs-1066ec21.js');
+require('./mixins-7b7c59fe.js');
+const JSS = require('./JSS-c65a40f1.js');
+const useChildElements = require('./useChildElements-4bc9b219.js');
+require('./luxon-59ca7d19.js');
+const utils = require('./utils-01dbfd4a.js');
+require('./sqm-text-span-view-f101dedf.js');
+const useDemoBigStat = require('./useDemoBigStat-42fa7a69.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-185b4bd0.js');
+const AutoColor = require('./AutoColor-db901e98.js');
+require('./sqm-portal-section-view-3b6c990e.js');
 
 /**
  * Build a font CSS URL using the Google Fonts CSS API
@@ -35,7 +35,7 @@ function buildFontsCssUrl(...fonts) {
   return `https://fonts.googleapis.com/css2?${queryString}`;
 }
 
-let BrandComponent = class {
+const BrandComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     stencilHooks_module.h$1(this);
@@ -81,7 +81,7 @@ let BrandComponent = class {
   }
 };
 
-let CardFeed = class {
+const CardFeed = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -153,7 +153,7 @@ function DividedLayoutView(props, children) {
     children));
 }
 
-let DividedLayout = class {
+const DividedLayout = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
@@ -212,13 +212,13 @@ const defaultFormState = {
   error: "",
 };
 function useEditProfile(props) {
-  const userIdent = index_module.ie();
+  const userIdent = index_module.ne();
   const [showEdit, setShowEdit] = stencilHooks_module.useState(false);
-  stencilHooks_module.useState("");
+  const [error, setError] = stencilHooks_module.useState("");
   const [userData, setUserData] = stencilHooks_module.useState(undefined);
   const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
-  const userDataResponse = index_module.sn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = index_module.qe(UPSERT_USER);
+  const userDataResponse = index_module.mn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = index_module.De(UPSERT_USER);
   stencilHooks_module.useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
@@ -298,10 +298,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)
-          ? global.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) ? global.intl.formatDisplayName(userDataResponse.data.viewer.countryCode, {
+          type: "region",
+        })
           : "";
         setUserData({
           ...(_c = userDataResponse.data) === null || _c === void 0 ? void 0 : _c.viewer,
@@ -325,7 +324,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) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -333,7 +332,7 @@ let EditProfile = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.jn()
+    const props = index_module.k()
       ? useEditProfileDemo(utils.getProps(this))
       : useEditProfile(utils.getProps(this));
     return index.h(AutoColor.EditProfileView, Object.assign({}, props));
@@ -394,20 +393,7 @@ function useEditProfileDemo(props) {
 }
 EditProfile.style = sqmEditProfileCss;
 
-let SqmHookStoryContainer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const Story = this.hookStory;
-    return index.h(Story, null);
-  }
-};
-
-function MediaView(props) {
+function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
   const style = {
@@ -430,13 +416,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)",
     },
@@ -448,35 +440,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)",
       },
     },
@@ -485,7 +479,7 @@ function MediaView(props) {
       "&::part(base)": {
         padding: "0 var(--sl-spacing-x-large)",
       },
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         width: "100%",
       },
     },
@@ -503,14 +497,14 @@ function MediaView(props) {
     props.layout === "overlay" && OverlayView(),
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
-    return (index.h("div", null,
-      props.imageUrl && (index.h("img", { class: sheet.classes.Image, src: props.imageUrl })),
+    return (index.h("div", { class: sheet.classes.Background },
       index.h("div", { class: sheet.classes.Overlay },
         props.header && (index.h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (index.h("div", { class: sheet.classes.Description }, props.description)),
         props.buttonText && (index.h("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 (index.h("div", null,
@@ -526,9 +520,13 @@ function MediaView(props) {
   }
 }
 
-let Media = class {
+const HeroImage = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @uiName Minimum Image Height
+     */
+    this.minHeight = "300px";
     /**
      * @uiName Overlay Color
      */
@@ -537,10 +535,6 @@ let Media = class {
      * @uiName Overlay Opacity
      */
     this.overlayOpacity = "0.75";
-    /**
-     * @uiName Minimum Image Height
-     */
-    this.minHeight = "300px";
     /**
      * @uiName Image Link
      * @uiType string
@@ -550,24 +544,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";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(HeroImageView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
+const SqmHookStoryContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    return index.h(MediaView, Object.assign({}, utils.getProps(this)));
+    const Story = this.hookStory;
+    return index.h(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 = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Container },
+      index.h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+}
+
+const Image = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Position Alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.align = "center";
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(ImageView, Object.assign({}, utils.getProps(this)));
   }
 };
 
@@ -586,12 +648,12 @@ function NavigationMenuView(props) {
 }
 
 function handleMenu(e) {
-  index_module.dn.push(e.detail.item.value);
+  index_module.pn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
   const ref = stencilHooks_module.useRef();
-  const [, rerender] = index_module.rn();
-  const user = index_module.ie();
+  const [, rerender] = index_module.dn();
+  const user = index_module.ne();
   stencilHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
@@ -612,7 +674,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) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -620,7 +682,7 @@ let NavigationMenu = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.jn()
+    const props = index_module.k()
       ? useNavigationMenuDemo(utils.getProps(this))
       : useNavigationMenu(utils.getProps(this));
     return (index.h(index.Host, { slot: "sqm-navigation-menu" }, index.h(NavigationMenuView, Object.assign({}, props))));
@@ -645,11 +707,11 @@ NavigationMenu.style = sqmNavigationMenuCss;
 
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = index_module.$e();
+  const [request, { loading, errors, data }] = index_module.He();
   const [open, setOpen] = stencilHooks_module.useState(false);
   const [error, setError] = stencilHooks_module.useState("");
   const [success, setSuccess] = stencilHooks_module.useState(false);
-  const user = index_module.ie();
+  const user = index_module.ne();
   const submit = async (event) => {
     var _a;
     setSuccess(false);
@@ -702,7 +764,7 @@ function usePortalChangePassword(props) {
   };
 }
 
-let PortalChangePassword = class {
+const PortalChangePassword = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -742,7 +804,7 @@ let PortalChangePassword = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = index_module.jn()
+    const { states, callbacks } = index_module.k()
       ? usePortalChangePasswordDemo(this)
       : usePortalChangePassword(this);
     return index.h(AutoColor.PortalChangePasswordView, { states: states, callbacks: callbacks });
@@ -771,7 +833,7 @@ function usePortalChangePasswordDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-let PortalContainer = class {
+const PortalContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -806,7 +868,7 @@ let PortalContainer = class {
 };
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = index_module.rn();
+  const [, rerender] = index_module.dn();
   return {
     data: {
       footer: footerContent,
@@ -818,7 +880,7 @@ function usePortalFrame(footerContent, headerContent) {
   };
 }
 
-let PortalFrame = class {
+const PortalFrame = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -828,7 +890,7 @@ let PortalFrame = class {
   render() {
     const footerContent = index.h("slot", { name: "footer" });
     const headerContent = index.h("slot", { name: "header" });
-    const props = index_module.jn()
+    const props = index_module.k()
       ? usePortalFrameDemo(footerContent, headerContent, this)
       : usePortalFrame(footerContent, headerContent);
     return (index.h(AutoColor.PortalFrameView, Object.assign({}, props), index.h("slot", null)));
@@ -851,7 +913,7 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = index_module.Ee();
+  const [request, { loading, errors, data }] = index_module.$e();
   const [error, setError] = stencilHooks_module.useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const nextPageOverride = urlParams.get("nextPage");
@@ -868,7 +930,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");
-      index_module.dn.push({
+      index_module.pn.push({
         pathname: nextPageOverride || props.nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
@@ -894,7 +956,7 @@ function usePortalLogin(props) {
   };
 }
 
-let PortalLogin = class {
+const PortalLogin = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -938,12 +1000,12 @@ let PortalLogin = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = index_module.jn()
+    const { states, callbacks } = index_module.k()
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.dn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.dn.push(states.registerPath) }, this.registerLabel))),
+      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.pn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.pn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -1031,13 +1093,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.
 
@@ -1052,14 +1114,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 (_) {
@@ -1299,14 +1361,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];
@@ -1459,13 +1521,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];
@@ -1533,13 +1595,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;
@@ -1606,7 +1668,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".
 
@@ -1614,7 +1676,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.
@@ -2225,9 +2287,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);
@@ -2249,7 +2311,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;
   }
@@ -2281,7 +2343,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':
@@ -2291,7 +2353,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);
 
@@ -2322,7 +2384,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) {
@@ -2377,7 +2439,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') {
@@ -2399,25 +2461,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');
@@ -2449,7 +2511,7 @@ function () {
     this.metadata = metadata;
   }
 
-  _createClass$4(PhoneNumber, [{
+  _createClass$1(PhoneNumber, [{
     key: "isPossible",
     value: function isPossible() {
       return isPossiblePhoneNumber(this, {
@@ -2489,7 +2551,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
@@ -2948,13 +3010,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__*/
@@ -2965,9 +3027,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];
@@ -2978,7 +3040,7 @@ function () {
     this.onCallingCodeChange = onCallingCodeChange;
   }
 
-  _createClass$3(AsYouTypeState, [{
+  _createClass$2(AsYouTypeState, [{
     key: "reset",
     value: function reset(defaultCountry, defaultCallingCode) {
       this.international = false;
@@ -3194,7 +3256,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
@@ -3206,14 +3268,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;
@@ -3272,13 +3334,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`
@@ -3292,7 +3354,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
@@ -3301,7 +3363,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".
@@ -3353,9 +3415,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
@@ -3379,7 +3441,7 @@ function () {
       return '';
     });
 
-    _defineProperty(this, "shouldTryNationalPrefixFormattingRule", function (format, _ref2) {
+    _defineProperty$3(this, "shouldTryNationalPrefixFormattingRule", function (format, _ref2) {
       var international = _ref2.international,
           nationalPrefix = _ref2.nationalPrefix;
 
@@ -3399,7 +3461,7 @@ function () {
     this.resetFormat();
   }
 
-  _createClass$2(AsYouTypeFormatter, [{
+  _createClass$3(AsYouTypeFormatter, [{
     key: "resetFormat",
     value: function resetFormat() {
       this.chosenFormat = undefined;
@@ -3723,7 +3785,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
 
@@ -3958,19 +4020,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 + ']+' + ')';
@@ -3989,7 +4051,7 @@ function () {
         metadata = _ref.metadata,
         onNationalSignificantNumberChange = _ref.onNationalSignificantNumberChange;
 
-    _classCallCheck$1(this, AsYouTypeParser);
+    _classCallCheck$4(this, AsYouTypeParser);
 
     this.defaultCountry = defaultCountry;
     this.defaultCallingCode = defaultCallingCode;
@@ -3997,11 +4059,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];
 
@@ -4419,7 +4481,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
@@ -4433,23 +4495,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 () {
   /**
@@ -4457,12 +4519,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];
 
@@ -4471,7 +4533,7 @@ function () {
     this.reset();
   }
 
-  _createClass(AsYouType, [{
+  _createClass$5(AsYouType, [{
     key: "getCountryAndCallingCode",
     value: function getCountryAndCallingCode(optionsOrDefaultCountry) {
       // Set `defaultCountry` and `defaultCallingCode` options.
@@ -4479,7 +4541,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 {
@@ -4839,18 +4901,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 = stencilHooks_module.useRef(null);
   const { validationState, setValidationState } = useValidationState({});
-  const [request, { loading, errors, data }] = index_module.De();
+  const [request, { loading, errors, data }] = index_module.Ve();
   const submit = async (event) => {
     let formControls = event.target.getFormControls();
     let formData = {};
@@ -4909,13 +4971,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);
   }, []);
   stencilHooks_module.useEffect(() => {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-      index_module.dn.push(props.nextPage);
+      index_module.pn.push(props.nextPage);
     }
   }, [(_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
   stencilHooks_module.useEffect(() => {
@@ -4957,7 +5019,7 @@ function usePortalRegister(props) {
   };
 }
 
-let PortalRegister = class {
+const PortalRegister = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -5015,12 +5077,12 @@ let PortalRegister = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks, refs } = index_module.jn()
+    const { states, callbacks, refs } = index_module.k()
       ? useRegisterDemo(this)
       : usePortalRegister(this);
     const content = {
       formData: index.h("slot", { name: "formData" }),
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.dn.push(states.loginPath) }, this.loginLabel))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.pn.push(states.loginPath) }, this.loginLabel))),
       terms: index.h("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
@@ -5096,7 +5158,7 @@ function ProgramExplainerView(props, children) {
     index.h("div", { class: sheet.classes.Grid }, children)));
 }
 
-let ProgramExplainer = class {
+const ProgramExplainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -5168,7 +5230,7 @@ function ProgramExplainerStepView(props) {
       index.h("div", { class: sheet.classes.Description }, props.description))));
 }
 
-let ProgramExplainerStep = class {
+const ProgramExplainerStep = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     stencilHooks_module.h$1(this);
@@ -5179,14 +5241,14 @@ let ProgramExplainerStep = class {
   }
 };
 
-const debug$1 = stencilHooks_module.browser('sq:useProgramMenu');
+const debug = stencilHooks_module.browser('sq:useProgramMenu');
 const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
 function useProgramMenu(props) {
   const programId = index_module.M();
   const host = index_module.P();
-  debug$1({ programId, props });
+  debug({ programId, props });
   const ref = stencilHooks_module.useRef();
-  const [, rerender] = index_module.rn();
+  const [, rerender] = index_module.dn();
   stencilHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
@@ -5210,7 +5272,7 @@ function useProgramMenu(props) {
   };
 }
 
-let ProgramMenu = class {
+const ProgramMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -5289,7 +5351,7 @@ function ReferralCardView(props) {
       index.h("div", { class: "right" }, props.slots.right))));
 }
 
-let ReferralCard = class {
+const ReferralCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -5329,8 +5391,8 @@ const GET_USER_DETAILS = index_module.dist.gql `
 function useReferralIframe(props) {
   var _a;
   const programId = index_module.M();
-  const user = index_module.ie();
-  const { data } = index_module.sn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const user = index_module.ne();
+  const { data } = index_module.mn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -5386,7 +5448,7 @@ function RequiredPropsError({ missingProps }) {
         index.h("strong", null, prop.attribute))))))));
 }
 
-let SqmReferralIframe = class {
+const SqmReferralIframe = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -5411,7 +5473,7 @@ let SqmReferralIframe = class {
     if (missingProps) {
       return index.h(RequiredPropsError, { missingProps: missingProps });
     }
-    const { states, data } = index_module.jn()
+    const { states, data } = index_module.k()
       ? useReferralIframeDemo(utils.getProps(this))
       : useReferralIframe(utils.getProps(this));
     return (index.h(index.Host, { style: { display: "contents" } }, index.h(AutoColor.ReferralIframeView, { data: data, states: states })));
@@ -6098,9 +6160,9 @@ function useRewardExchangeList(props) {
   });
   const [open, setOpen] = stencilHooks_module.useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = index_module.ie();
-  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = index_module.qe(EXCHANGE);
-  const { data, loading, refetch, errors: queryError, } = index_module.sn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = index_module.ne();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = index_module.De(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = index_module.mn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   stencilHooks_module.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) {
@@ -6120,7 +6182,7 @@ function useRewardExchangeList(props) {
       canvas.confetti || confetti.create(canvas, { resize: true, });
     canvas.confetti();
   }, [canvasRef.current]);
-  const { refresh } = index_module.He();
+  const { refresh } = index_module.Qe();
   async function exchangeReward() {
     if (!selectedItem)
       return;
@@ -6233,7 +6295,7 @@ function useRewardExchangeList(props) {
   };
 }
 
-let SqmRewardExchangeList = class {
+const SqmRewardExchangeList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -6358,7 +6420,7 @@ let SqmRewardExchangeList = class {
     // if (missingProps) {
     //   return <RequiredPropsError missingProps={missingProps} />;
     // }
-    const { states, data, callbacks, refs } = index_module.jn()
+    const { states, data, callbacks, refs } = index_module.k()
       ? useRewardExchangeListDemo(utils.getProps(this))
       : useRewardExchangeList(utils.getProps(this));
     return (index.h(index.Host, { style: { display: "contents" } }, index.h(AutoColor.RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
@@ -6394,7 +6456,7 @@ function useRewardExchangeListDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const debug = stencilHooks_module.browser("sq:useRouter");
+const debug$1 = stencilHooks_module.browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
     return;
@@ -6402,7 +6464,7 @@ function matchPath(pattern, page) {
   return regexp.exec(page);
 }
 function useRouter() {
-  const location = index_module.ln();
+  const location = index_module.hn();
   const host = index_module.P();
   const [slot, setSlot] = stencilHooks_module.useState(undefined);
   const [container, setContainer] = stencilHooks_module.useState(undefined);
@@ -6422,7 +6484,7 @@ function useRouter() {
   stencilHooks_module.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>
@@ -6437,7 +6499,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,
@@ -6445,15 +6507,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
     }
@@ -6472,7 +6534,7 @@ function useRouter() {
 
 const sqmRouterCss = "sqm-router{display:contents}";
 
-let SqmRouter = class {
+const SqmRouter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -6488,7 +6550,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) {
     index.registerInstance(this, hostRef);
     /**
@@ -6517,7 +6579,7 @@ let ShareButton = class {
   disconnectedCallback() { }
   render() {
     const thisProps = utils.getProps(this);
-    const props = index_module.jn()
+    const props = index_module.k()
       ? useDemoShareButton(thisProps)
       : AutoColor.useShareButton(thisProps);
     return (index.h(AutoColor.ShareButtonView, Object.assign({}, props), index.h("slot", null)));
@@ -6552,10 +6614,10 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 function useShareCode(props) {
   var _a, _b;
   const programId = index_module.M();
-  const user = index_module.ie();
-  const engagementMedium = index_module.Rn();
-  const { data } = index_module.sn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.qe(WIDGET_ENGAGEMENT_EVENT);
+  const user = index_module.ne();
+  const engagementMedium = index_module.x();
+  const { data } = index_module.mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.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
   "...";
@@ -6582,8 +6644,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) {
     index.registerInstance(this, hostRef);
     /**
@@ -6597,13 +6659,13 @@ let ShareCode = class {
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN$1;
+    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const thisProps = utils.getProps(this);
-    const props = index_module.jn()
+    const props = index_module.k()
       ? useDemoShareCode(thisProps)
       : useShareCode(thisProps);
     return index.h(AutoColor.ShareLinkView, Object.assign({}, props));
@@ -6626,8 +6688,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) {
     index.registerInstance(this, hostRef);
     /**
@@ -6641,13 +6703,13 @@ let ShareLink = class {
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
+    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN$1;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const thisProps = utils.getProps(this);
-    const props = index_module.jn()
+    const props = index_module.k()
       ? useDemoShareLink(thisProps)
       : AutoColor.useShareLink(thisProps);
     return index.h(AutoColor.ShareLinkView, Object.assign({}, props));
@@ -6678,10 +6740,10 @@ const SEND_EVENT = index_module.dist.gql `
   }
 `;
 function useTaskCard(props) {
-  const user = index_module.ie();
-  const locale = index_module.An();
-  const [sendUserEvent, { data, loading: loadingEvent }] = index_module.qe(SEND_EVENT);
-  const { refresh } = index_module.He();
+  const user = index_module.ne();
+  const locale = index_module.R();
+  const [sendUserEvent, { data, loading: loadingEvent }] = index_module.De(SEND_EVENT);
+  const { refresh } = index_module.Qe();
   stencilHooks_module.useEffect(() => {
     if (data) {
       refresh();
@@ -6711,7 +6773,7 @@ function useTaskCard(props) {
   };
 }
 
-let TaskCard = class {
+const TaskCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -6813,11 +6875,11 @@ let TaskCard = class {
   }
   disconnectedCallback() { }
   render() {
-    const { props } = index_module.jn()
+    const { props } = index_module.k()
       ? useDemoBigStat.useDemoBigStat(this)
       : useDemoBigStat.useBigStat({ ...utils.getProps(this), programId: this.programId });
     const { value, loading } = props;
-    const { states, callbacks } = index_module.jn()
+    const { states, callbacks } = index_module.k()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
     return (index.h(AutoColor.TaskCardView, { callbacks: callbacks, states: {
@@ -6838,7 +6900,7 @@ function useTaskCardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-let Timeline = class {
+const Timeline = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -6854,7 +6916,12 @@ let Timeline = class {
   render() {
     //@ts-ignore
     const rewards = useChildElements.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;   
@@ -6863,7 +6930,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: "";
@@ -6887,20 +6954,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 (index.h("div", null, index.h("style", { type: "text/css" }, vanillaStyle), index.h("slot", null)));
   }
@@ -6914,7 +6981,7 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-let TimelineReward = class {
+const TimelineReward = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -6932,6 +6999,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",
@@ -6954,13 +7036,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)",
         },
       },
     };
@@ -6972,7 +7048,7 @@ let TimelineReward = class {
 	}
 	`;
     useChildElements.useRequestRerender([this.reward]);
-    return (index.h("div", { class: sheet.classes.TimelineReward }, index.h("style", { type: "text/css" }, styleString, vanillaStyle), index.h("div", { class: "step" }, this.icon === "gift" && (index.h("div", { class: "icon" }, index.h(Gift, null))), this.icon === "circle" && (index.h("div", { class: "icon" }, index.h(Circle, null))), index.h("div", null, index.h("div", null, index.h("span", { class: "reward" }, this.reward), index.h("span", { class: "unit" }, this.unit)), index.h("div", { class: "description" }, this.desc)))));
+    return (index.h("div", { class: sheet.classes.TimelineReward }, index.h("style", { type: "text/css" }, styleString, vanillaStyle), index.h("div", { class: "container" }, this.line && index.h("div", { class: "line" }, "."), index.h("div", { class: "step" }, this.icon === "gift" && (index.h("div", { class: "icon" }, index.h(Gift, null))), this.icon === "circle" && (index.h("div", { class: "icon" }, index.h(Circle, null))), index.h("div", null, index.h("div", null, index.h("span", { class: "reward" }, this.reward), index.h("span", { class: "unit" }, this.unit)), index.h("div", { class: "description" }, this.desc))))));
   }
 };
 
@@ -6992,8 +7068,8 @@ const GET_USER_NAME = index_module.dist.gql `
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const user = index_module.ie();
-  const res = index_module.sn(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = index_module.ne();
+  const res = index_module.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}`
@@ -7005,7 +7081,7 @@ function useUserName(props) {
   };
 }
 
-let UserName = class {
+const UserName = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this._ignored = true;
@@ -7021,7 +7097,7 @@ let UserName = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.jn() ? useUserNameDemo(this) : useUserName(this);
+    const props = index_module.k() ? useUserNameDemo(this) : useUserName(this);
     return index.h(UserNameView, Object.assign({}, props));
   }
 };
@@ -7037,8 +7113,9 @@ exports.sqm_brand = BrandComponent;
 exports.sqm_card_feed = CardFeed;
 exports.sqm_divided_layout = DividedLayout;
 exports.sqm_edit_profile = EditProfile;
+exports.sqm_hero_image = HeroImage;
 exports.sqm_hook_story_container = SqmHookStoryContainer;
-exports.sqm_media = Media;
+exports.sqm_image = Image;
 exports.sqm_navigation_menu = NavigationMenu;
 exports.sqm_portal_change_password = PortalChangePassword;
 exports.sqm_portal_container = PortalContainer;