@saasquatch/mint-components 1.6.8 → 1.6.10-0

package/dist/cjs/{ShadowViewAddon-952b4df5.js → ShadowViewAddon-8be973fa.js}

@@ -2,16 +2,16 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const global = require('./global-0b8cbb00.js');
-const index_module = require('./index.module-c6626247.js');
+const global = require('./global-e0036ac2.js');
+const index_module = require('./index.module-e67cc994.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
-const useChildElements = require('./useChildElements-eaa9e49d.js');
+const useChildElements = require('./useChildElements-8627c9be.js');
 const luxon = require('./luxon-53e983a6.js');
 const utils = require('./utils-6847bc06.js');
-const sqmTextSpanView = require('./sqm-text-span-view-c34577fa.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-5beae29c.js');
+const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -37,48 +37,48 @@ const style = {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function ShareButtonView(props, children) {
-  const vanillaStyle = `
-	*::part(base) {
-	border: none;
+  const vanillaStyle = `
+	*::part(base) {
+	border: none;
 			--sl-focus-ring-color-primary: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
       ? medium[props.medium].color
-      : ""}80!important;
-
+      : ""}80!important;
+
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
       ? medium[props.medium].color
-      : ""};
+      : ""};
 	color: ${props.textcolor
     ? props.textcolor
     : props.medium
       ? medium[props.medium].text
-      : ""};
-	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
-	}
-
-	*::part(base):hover {
+      : ""};
+	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+	}
+
+	*::part(base):hover {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
       ? medium[props.medium].color
-      : ""}D1!important;
-	}
-
-	*::part(base):focus {
+      : ""}D1!important;
+	}
+
+	*::part(base):focus {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
       ? medium[props.medium].color
-      : ""}D1!important;
-	}
-
-	*::part(label) {
-		position: relative;
-		top: 2%;
-	}
+      : ""}D1!important;
+	}
+
+	*::part(label) {
+		position: relative;
+		top: 2%;
+	}
 	`;
   return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
@@ -131,10 +131,10 @@ const style$1 = {
 };
 const sheet$1 = JSS.createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
-const vanillaStyle = `
-	:host{
-		display: block;
-	}
+const vanillaStyle = `
+	:host{
+		display: block;
+	}
 `;
 function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -149,11 +149,11 @@ function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (index.h("div", { class: sheet$1.classes.Leaderboard },
+  return (index.h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    index.h("table", null,
+    index.h("table", { part: "sqm-table" },
       index.h("tr", null,
         styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
         index.h("th", { class: "User" }, styles.usersheading),
@@ -191,17 +191,75 @@ function LeaderboardView(props) {
 const style$2 = {
   HostBlock: mixins.HostBlock,
   inputStyle: {
-    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
+    "&::part(base)": { cursor: "pointer", overflow: "visible" },
+    width: "100%",
   },
+  inputErrorStyle: {
+    "&::part(base)": {
+      border: "2px solid red",
+    },
+  },
+  containerStyle: {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
+  errorTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-danger-500)",
+  },
+};
+const vanillaStyle$1 = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}`,
+  center: `  
+sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
 };
+const disabledStyles = `
+  sl-input::part(input){
+    cursor: default;
+  }
+`;
 const sheet$2 = JSS.createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
-function ShareLinkView(props) {
+function CopyTextView(props) {
+  const { buttonStyle = "icon" } = props;
+  const error = !props.loading && props.error;
+  const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
+  const tooltipPlacement = props.buttonStyle === "button-below"
+    ? "bottom"
+    : props.buttonStyle === "button-outside"
+      ? "top"
+      : "top-end";
+  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
   return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$2),
-    index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      index.h("sl-input", { class: sheet$2.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
-        index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })))));
+    index.h("style", { type: "text/css" },
+      styleString$2,
+      vanillaStyle$1,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    index.h("div", { class: sheet$2.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      index.h("sl-input", { class: `${sheet$2.classes.inputStyle} ${error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+        buttonStyle === "icon" && copyButton,
+        error && (index.h("p", { slot: "help-text", class: sheet$2.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton)));
 }
 
 function BigStatView(props) {
@@ -277,13 +335,13 @@ const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
-  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame },
+  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$3),
-    index.h("div", { class: sheet$3.classes.HeaderWrapper },
+    index.h("div", { class: sheet$3.classes.HeaderWrapper, part: "sqm-header" },
       data.header,
       index.h("slot", { name: "sqm-navigation-menu" })),
     children,
-    index.h("div", { class: sheet$3.classes.FooterWrapper }, data.footer)));
+    index.h("div", { class: sheet$3.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -292,8 +350,8 @@ const EditProfileView = (props) => {
   const { text } = states;
   const { errors } = states.formState;
   if (states.showEdit) {
-    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}` },
-      index.h("h2", { style: {
+    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+      index.h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           margin: "0px",
           textAlign: "center",
@@ -321,9 +379,9 @@ const EditProfileView = (props) => {
               callbacks.onSubmit(e);
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext)))));
   }
-  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
+  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     index.h("div", { class: "FormSection" },
-      index.h("h2", { style: {
+      index.h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",
@@ -340,35 +398,35 @@ const EditProfileView = (props) => {
       }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
 };
 
-const MessageLinkQuery = index_module.dist.gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        shareLink(programId: $programId)
-      }
-    }
-  }
+const MessageLinkQuery = index_module.dist.gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        shareLink(programId: $programId)
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 function useShareLink(props) {
   var _a, _b;
   const { programId = index_module.O() } = props;
-  const user = index_module.N();
-  const engagementMedium = index_module.U();
-  const { data } = index_module.dn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.Pe(WIDGET_ENGAGEMENT_EVENT);
-  const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
+  const user = index_module.L();
+  const engagementMedium = index_module.T();
+  const { data } = index_module.mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.Ie(WIDGET_ENGAGEMENT_EVENT);
+  const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = stencilHooks_module.useState(false);
   function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
-    navigator.clipboard.writeText(shareString);
+    navigator.clipboard.writeText(copyString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
     sendLoadEvent({
@@ -384,26 +442,26 @@ function useShareLink(props) {
       },
     });
   }
-  return { ...props, onClick, open, shareString };
+  return { ...props, onClick, open, copyString: copyString };
 }
 
-const MessageLinkQuery$1 = index_module.dist.gql `
-  query (
-    $programId: ID
-    $engagementMedium: UserEngagementMedium!
-    $shareMedium: ReferralShareMedium!
-  ) {
-    viewer {
-      ... on User {
-        messageLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: $shareMedium
-        )
-        shareLink(programId: $programId, engagementMedium: $engagementMedium)
-      }
-    }
-  }
+const MessageLinkQuery$1 = index_module.dist.gql `
+  query (
+    $programId: ID
+    $engagementMedium: UserEngagementMedium!
+    $shareMedium: ReferralShareMedium!
+  ) {
+    viewer {
+      ... on User {
+        messageLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: $shareMedium
+        )
+        shareLink(programId: $programId, engagementMedium: $engagementMedium)
+      }
+    }
+  }
 `;
 function NativeShare(props, directLink) {
   const title = props.sharetitle || "Share title";
@@ -446,14 +504,14 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : index_module.O();
-  const user = index_module.N();
+  const user = index_module.L();
   const variables = {
-    engagementMedium: index_module.U(),
+    engagementMedium: index_module.T(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = index_module.dn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = index_module.mn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = index_module.getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -771,7 +829,7 @@ function pathToRegexp(path, keys, options) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.dn(query, variables);
+  const res = index_module.mn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -790,16 +848,16 @@ _, status) => {
       ? { dateConverted_exists: false }
       : {};
   const queryFilter = { ...programFilter, ...convertedFilter };
-  return debugQuery(index_module.dist.gql `
-      query ($queryFilter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $queryFilter) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($queryFilter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $queryFilter) {
+              totalCount
+            }
+          }
+        }
+      }
     `, { queryFilter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
@@ -812,19 +870,19 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
   if (programId === "classic")
     return null;
-  return debugQuery(index_module.dist.gql `
-      query {
-        viewer {
-          ... on User {
-            programGoals {
-              goalId
-              programId
-              count
-              conversionCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query {
+        viewer {
+          ... on User {
+            programGoals {
+              goalId
+              programId
+              count
+              conversionCount
+            }
+          }
+        }
+      }
     `, { programId, metricType, goalId, locale }, (res) => {
     var _a, _b, _c, _d, _e, _f;
     const goal = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.programGoals) === null || _c === void 0 ? void 0 : _c.filter((goal) => goal.goalId === goalId && goal.programId === programId);
@@ -835,14 +893,14 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   });
 };
 const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
-  return debugQuery(index_module.dist.gql `
-      query {
-        viewer {
-          ... on User {
-            customFields
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query {
+        viewer {
+          ... on User {
+            customFields
+          }
+        }
+      }
     `, { fieldName, goalId, locale }, (res) => {
     var _a, _b, _c;
     const customField = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields) === null || _c === void 0 ? void 0 : _c[fieldName];
@@ -860,16 +918,16 @@ const referralsMonthQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index_module.dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
     `, { filter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
@@ -886,16 +944,16 @@ const referralsWeekQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index_module.dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
     `, { filter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
@@ -907,16 +965,16 @@ const referralsWeekQuery = (programId) => {
 const rewardsCountQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(filter: { programId_eq: $programId }) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(filter: { programId_eq: $programId }) {
+              totalCount
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
   }, (res) => {
@@ -931,28 +989,28 @@ const rewardsCountFilteredQuery = (programId,
 // locale
 _, type, unit, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $unit: String
-        $type: RewardType
-        $statusFilter: RewardStatusFilterInput
-      ) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                type_eq: $type
-                unit_eq: $unit
-                statuses_eq: $statusFilter
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $unit: String
+        $type: RewardType
+        $statusFilter: RewardStatusFilterInput
+      ) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                type_eq: $type
+                unit_eq: $unit
+                statuses_eq: $statusFilter
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     unit,
@@ -970,22 +1028,22 @@ const integrationRewardsCountFilteredQuery = (programId,
 // locale
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                type_eq: INTEGRATION
-                statuses_eq: $statusFilter
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                type_eq: INTEGRATION
+                statuses_eq: $statusFilter
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     statusFilter,
@@ -1000,21 +1058,21 @@ _, status, global = "") => {
 const rewardsMonthQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                dateGiven_timeframe: "this_month"
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                dateGiven_timeframe: "this_month"
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
   }, (res) => {
@@ -1028,21 +1086,21 @@ _, global = "") => {
 const rewardsWeekQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                dateGiven_timeframe: "this_week"
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(
+              filter: {
+                programId_eq: $programId
+                dateGiven_timeframe: "this_week"
+              }
+            ) {
+              totalCount
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
   }, (res) => {
@@ -1054,33 +1112,33 @@ _, global = "") => {
   });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $type: RewardType
-        $unit: String!
-        $locale: RSLocale
-      ) {
-        fallback: formatRewardPrettyValue(
-          value: 0
-          unit: $unit
-          locale: $locale
-          formatType: UNIT_FORMATTED
-        )
-        viewer: viewer {
-          ... on User {
-            rewardBalanceDetails(
-              programId: $programId
-              filter: { type_eq: $type, unit_eq: $unit }
-              locale: $locale
-            ) {
-              ... on CreditRewardBalance {
-                prettyRedeemedCredit
-              }
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyRedeemedCredit
+              }
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     type,
@@ -1097,33 +1155,33 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $type: RewardType
-        $unit: String!
-        $locale: RSLocale
-      ) {
-        fallback: formatRewardPrettyValue(
-          value: 0
-          unit: $unit
-          locale: $locale
-          formatType: UNIT_FORMATTED
-        )
-        viewer: viewer {
-          ... on User {
-            rewardBalanceDetails(
-              programId: $programId
-              filter: { type_eq: $type, unit_eq: $unit }
-              locale: $locale
-            ) {
-              ... on CreditRewardBalance {
-                prettyAssignedCredit
-              }
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyAssignedCredit
+              }
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     type,
@@ -1140,33 +1198,33 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $type: RewardType
-        $unit: String!
-        $locale: RSLocale
-      ) {
-        fallback: formatRewardPrettyValue(
-          value: 0
-          unit: $unit
-          locale: $locale
-          formatType: UNIT_FORMATTED
-        )
-        viewer: viewer {
-          ... on User {
-            rewardBalanceDetails(
-              programId: $programId
-              filter: { type_eq: $type, unit_eq: $unit }
-              locale: $locale
-            ) {
-              ... on CreditRewardBalance {
-                prettyAvailableValue
-              }
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyAvailableValue
+              }
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     type,
@@ -1188,34 +1246,34 @@ const parseRewardValueFormat = {
 };
 const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
   var _a;
-  return debugQuery(index_module.dist.gql `
-      query (
-        $programId: ID
-        $type: RewardType!
-        $unit: String!
-        $format: RewardValueFormatType!
-        $locale: RSLocale
-      ) {
-        fallback: formatRewardPrettyValue(
-          value: 0
-          unit: $unit
-          locale: $locale
-          formatType: $format
-        )
-        viewer: viewer {
-          ... on User {
-            rewardBalanceDetails(
-              programId: $programId
-              filter: { type_eq: $type, unit_eq: $unit }
-              locale: $locale
-            ) {
-              ... on CreditRewardBalance {
-                prettyAvailableValue(formatType: $format)
-              }
-            }
-          }
-        }
-      }
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType!
+        $unit: String!
+        $format: RewardValueFormatType!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: $format
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyAvailableValue(formatType: $format)
+              }
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     type,
@@ -1332,8 +1390,8 @@ function useBigStat(props) {
   const { statType, flexReverse, alignment, programId = index_module.O(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements.useChildElements();
-  const locale = index_module.x();
-  const userIdent = index_module.N();
+  const locale = index_module.W();
+  const userIdent = index_module.L();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1453,11 +1511,11 @@ function StatContainerView(props, children) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.StatFrame },
-    index.h("div", { class: sheet.classes.StatContainer },
+  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
+    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
       index.h("style", { type: "text/css" }, styleString),
       children),
-    index.h("div", { class: sheet.classes.BorderFix })));
+    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
 }
 
 function PortalChangePasswordView(props) {
@@ -1543,21 +1601,21 @@ const style$4 = {
   },
   ButtonsContainer: mixins.AuthButtonsContainer,
 };
-const vanillaStyle$1 = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle$2 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet$4 = JSS.createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
 function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet$4.classes.Wrapper },
+  return (index.h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$1,
+      vanillaStyle$2,
       styleString$4),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit },
@@ -1583,20 +1641,20 @@ const style$5 = {
   ButtonsContainer: mixins.AuthButtonsContainer,
   ErrorStyle: mixins.ErrorStyles,
 };
-const vanillaStyle$2 = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
+const vanillaStyle$3 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
 `;
 const sheet$5 = JSS.createStyleSheet(style$5);
 const styleString$5 = sheet$5.toString();
@@ -1606,9 +1664,9 @@ function PortalRegisterView(props) {
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (index.h("div", { class: sheet$5.classes.Wrapper },
+  return (index.h("div", { class: sheet$5.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$2,
+      vanillaStyle$3,
       styleString$5),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet$5.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
@@ -1617,23 +1675,23 @@ function PortalRegisterView(props) {
       content.formData,
       !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
-            return "Cannot be empty";
+            return content.requiredFieldErrorMessage;
           }
           // this matches shoelace validation, but could be better
           if (!value.includes("@")) {
-            return "Must be a valid email address";
+            return content.invalidEmailErrorMessage;
           }
         } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
         class: sheet$5.classes.ErrorStyle,
         helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          "Cannot be empty",
+          content.requiredFieldErrorMessage,
       }
         : [])))),
       !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
       !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
         class: sheet$5.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
       content.terms,
@@ -1690,7 +1748,7 @@ function Details(props) {
     index.h("span", { class: sheet$6.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
-        index.h("sl-icon", { name: "chevron-down" })),
+        index.h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
       index.h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }
 
@@ -2303,13 +2361,14 @@ function TaskCardView(props) {
   const taskEnded = content.rewardDuration && dateEnd <= dateToday;
   const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
-  const vanillaStyle = `
-	:host{
-		display: block;
-		margin-bottom: var(--sl-spacing-large);
-	}
+  const vanillaStyle = `
+	:host{
+		display: block;
+		margin-bottom: var(--sl-spacing-large);
+	}
+
   `;
-  return (index.h("div", { class: sheet$8.classes.TaskCard },
+  return (index.h("div", { class: sheet$8.classes.TaskCard, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       styleString$8,
       vanillaStyle),
@@ -2326,7 +2385,7 @@ function TaskCardView(props) {
       }))),
     !states.loading && taskEnded && (index.h("div", { class: sheet$8.classes.Ended },
       index.h("span", { class: "icon" },
-        index.h("sl-icon", { name: "exclamation-triangle-fill" })),
+        index.h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       global.intl.formatMessage({
         id: "endedMessage",
         defaultMessage: content.endedMessage,
@@ -2335,7 +2394,7 @@ function TaskCardView(props) {
           .setLocale(utils.luxonLocale(states.locale))
           .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
-    index.h("div", { style: {
+    index.h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
           "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
       }, class: taskUnavailable
@@ -2343,12 +2402,12 @@ function TaskCardView(props) {
         : taskComplete
           ? "main complete"
           : "main" },
-      index.h("div", { class: "container", "data-subdue": taskComplete || taskUnavailable },
+      index.h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
         index.h("div", { class: sheet$8.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
           showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
-          index.h("span", { class: "value" }, content.rewardAmount),
-          index.h("span", { class: "text" }, content.rewardUnit)))),
-        states.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", style: {
+          index.h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
+          index.h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
+        states.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -2389,7 +2448,7 @@ function TaskCardView(props) {
                 .setLocale(utils.luxonLocale(states.locale))
                 .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
             })))),
-          index.h("sl-button", { class: taskUnavailable
+          index.h("sl-button", { exportparts: "base: button", id: "sl-button", class: taskUnavailable
               ? "action neutral"
               : taskComplete
                 ? "action disabled"
@@ -2398,6 +2457,224 @@ function TaskCardView(props) {
             } }, content.buttonText))))))));
 }
 
+function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {
+  return (index.h("svg", { width: width, height: height, viewBox: "0 0 132 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("g", { "clip-path": "url(#clip0)" },
+      index.h("path", { xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M66.4512 1.01758V1.01562C66.2601 1.01562 66.1669 1.05312 65.6827 1.43312L63.2868 3.31163C62.9112 3.60612 62.8383 4.15812 63.1241 4.54513C63.4099 4.93213 63.9457 5.00712 64.3213 4.71263L64.7959 4.34063C65.0696 4.12713 65.4601 4.18212 65.6682 4.46362C65.8763 4.74513 65.8237 5.14862 65.5494 5.36363L62.8011 7.51862C62.4255 7.81312 62.3526 8.36512 62.6384 8.75212C62.9242 9.13912 63.4601 9.21412 63.8357 8.91962L64.737 8.21263C65.0107 7.99813 65.4017 8.05263 65.6103 8.33512C65.8183 8.61662 65.7657 9.01812 65.4934 9.23362L62.4328 11.6331C62.0572 11.9276 61.9843 12.4796 62.2701 12.8666C62.5559 13.2536 63.0917 13.3286 63.4673 13.0341L64.6814 12.0821C64.9557 11.8676 65.3462 11.9221 65.5548 12.2046C65.6397 12.3196 65.6812 12.4546 65.6822 12.5886L65.6827 15.9306C62.7514 15.5406 60.479 12.9541 60.479 9.82913C60.479 8.07863 61.207 6.40462 62.4767 5.23712L62.5274 5.19062L62.4675 5.12012C62.4651 5.11723 62.4626 5.11435 62.4601 5.11147C62.4448 5.09344 62.4295 5.07553 62.4149 5.05613C62.2628 4.85413 62.1595 4.62363 62.1069 4.37162L62.0828 4.25712L61.9959 4.33212C60.4095 5.69863 59.5 7.70263 59.5 9.82913C59.5 13.7785 62.6179 16.9919 66.4508 16.9921V16.9936C70.2839 16.9936 73.4025 13.7806 73.4025 9.83058C73.4025 7.70358 72.4925 5.70008 70.9062 4.33358L70.9072 4.33208L70.8203 4.25708L70.7961 4.37158C70.7435 4.62358 70.6397 4.85408 70.4876 5.05658C70.4739 5.07518 70.459 5.09266 70.444 5.11031C70.4416 5.11306 70.4393 5.11581 70.4369 5.11858L70.3752 5.19108L70.4258 5.23758C71.6955 6.40508 72.424 8.07908 72.424 9.83008C72.424 11.4741 71.8027 13.0196 70.6745 14.1816C69.7297 15.1551 68.5238 15.7606 67.2198 15.9321V12.5926H67.2174L67.2198 12.5896C67.2208 12.4556 67.2623 12.3206 67.3473 12.2056C67.5558 11.9236 67.9469 11.8686 68.2206 12.0831L69.4347 13.0351C69.8103 13.3296 70.3462 13.2546 70.632 12.8676C70.9178 12.4806 70.8449 11.9286 70.4693 11.6341L67.4086 9.23458C67.1363 9.01958 67.0837 8.61808 67.2918 8.33658C67.5003 8.05408 67.8914 7.99958 68.1651 8.21408L69.0664 8.92108C69.442 9.21558 69.9778 9.14058 70.2636 8.75358C70.5494 8.36658 70.4765 7.81458 70.1009 7.52008L67.3526 5.36508C67.0789 5.15058 67.0258 4.74758 67.2338 4.46508C67.4419 4.18258 67.832 4.12858 68.1062 4.34208L68.5807 4.71408C68.9563 5.00858 69.4922 4.93358 69.778 4.54658C70.0638 4.15958 69.9909 3.60758 69.6153 3.31308L67.2194 1.43508C66.735 1.05587 66.6421 1.01764 66.4512 1.01758Z", fill: color })),
+    index.h("path", { d: "M1.67078 13V5.95H4.46078C5.22078 5.95 5.80078 6.13333 6.20078 6.5C6.60745 6.86667 6.81078 7.39 6.81078 8.07C6.81078 8.74333 6.60745 9.26667 6.20078 9.64C5.80078 10.0067 5.22078 10.19 4.46078 10.19H2.49078V13H1.67078ZM2.49078 9.5H4.36078C5.45411 9.5 6.00078 9.02333 6.00078 8.07C6.00078 7.11 5.45411 6.63 4.36078 6.63H2.49078V9.5ZM9.6843 13.09C9.21096 13.09 8.80096 12.9867 8.4543 12.78C8.10763 12.5733 7.83763 12.2833 7.6443 11.91C7.45763 11.53 7.3643 11.0833 7.3643 10.57C7.3643 10.0567 7.45763 9.61333 7.6443 9.24C7.83763 8.86 8.10763 8.56667 8.4543 8.36C8.80096 8.15333 9.21096 8.05 9.6843 8.05C10.151 8.05 10.5576 8.15333 10.9043 8.36C11.2576 8.56667 11.5276 8.86 11.7143 9.24C11.9076 9.61333 12.0043 10.0567 12.0043 10.57C12.0043 11.0833 11.9076 11.53 11.7143 11.91C11.5276 12.2833 11.2576 12.5733 10.9043 12.78C10.5576 12.9867 10.151 13.09 9.6843 13.09ZM9.6843 12.44C10.1376 12.44 10.501 12.28 10.7743 11.96C11.0476 11.6333 11.1843 11.17 11.1843 10.57C11.1843 9.96333 11.0476 9.5 10.7743 9.18C10.501 8.86 10.1376 8.7 9.6843 8.7C9.2243 8.7 8.85763 8.86 8.5843 9.18C8.31763 9.5 8.1843 9.96333 8.1843 10.57C8.1843 11.17 8.31763 11.6333 8.5843 11.96C8.85763 12.28 9.2243 12.44 9.6843 12.44ZM14.4426 13L12.6326 8.14H13.4826L14.8526 12.05L16.2726 8.14H16.9626L18.3626 12.06L19.7526 8.14H20.5626L18.7426 13H17.9726L16.6026 9.23L15.2226 13H14.4426ZM23.6824 13.09C22.9158 13.09 22.3091 12.8667 21.8624 12.42C21.4158 11.9667 21.1924 11.3533 21.1924 10.58C21.1924 10.08 21.2924 9.64 21.4924 9.26C21.6924 8.87333 21.9658 8.57667 22.3124 8.37C22.6658 8.15667 23.0724 8.05 23.5324 8.05C24.1924 8.05 24.7091 8.26333 25.0824 8.69C25.4558 9.11 25.6424 9.69 25.6424 10.43V10.74H21.9824C22.0091 11.2933 22.1691 11.7167 22.4624 12.01C22.7558 12.2967 23.1624 12.44 23.6824 12.44C23.9758 12.44 24.2558 12.3967 24.5224 12.31C24.7891 12.2167 25.0424 12.0667 25.2824 11.86L25.5624 12.43C25.3424 12.6367 25.0624 12.8 24.7224 12.92C24.3824 13.0333 24.0358 13.09 23.6824 13.09ZM23.5524 8.65C23.0924 8.65 22.7291 8.79333 22.4624 9.08C22.1958 9.36667 22.0391 9.74333 21.9924 10.21H24.9424C24.9224 9.71667 24.7924 9.33333 24.5524 9.06C24.3191 8.78667 23.9858 8.65 23.5524 8.65ZM26.8147 13V8.14H27.6047V9.01C27.8647 8.42333 28.398 8.1 29.2047 8.04L29.4947 8.01L29.5547 8.71L29.0447 8.77C28.5847 8.81 28.2347 8.95667 27.9947 9.21C27.7547 9.45667 27.6347 9.79667 27.6347 10.23V13H26.8147ZM32.5301 13.09C31.7634 13.09 31.1567 12.8667 30.7101 12.42C30.2634 11.9667 30.0401 11.3533 30.0401 10.58C30.0401 10.08 30.1401 9.64 30.3401 9.26C30.5401 8.87333 30.8134 8.57667 31.1601 8.37C31.5134 8.15667 31.9201 8.05 32.3801 8.05C33.0401 8.05 33.5567 8.26333 33.9301 8.69C34.3034 9.11 34.4901 9.69 34.4901 10.43V10.74H30.8301C30.8567 11.2933 31.0167 11.7167 31.3101 12.01C31.6034 12.2967 32.0101 12.44 32.5301 12.44C32.8234 12.44 33.1034 12.3967 33.3701 12.31C33.6367 12.2167 33.8901 12.0667 34.1301 11.86L34.4101 12.43C34.1901 12.6367 33.9101 12.8 33.5701 12.92C33.2301 13.0333 32.8834 13.09 32.5301 13.09ZM32.4001 8.65C31.9401 8.65 31.5767 8.79333 31.3101 9.08C31.0434 9.36667 30.8867 9.74333 30.8401 10.21H33.7901C33.7701 9.71667 33.6401 9.33333 33.4001 9.06C33.1667 8.78667 32.8334 8.65 32.4001 8.65ZM37.5123 13.09C37.079 13.09 36.699 12.9867 36.3723 12.78C36.0523 12.5733 35.8023 12.2833 35.6223 11.91C35.449 11.53 35.3623 11.0833 35.3623 10.57C35.3623 10.05 35.449 9.60333 35.6223 9.23C35.8023 8.85 36.0523 8.56 36.3723 8.36C36.699 8.15333 37.079 8.05 37.5123 8.05C37.8923 8.05 38.2257 8.13333 38.5123 8.3C38.8057 8.46667 39.0223 8.69667 39.1623 8.99V5.95H39.9723V13H39.1823V12.11C39.0423 12.4167 38.8257 12.6567 38.5323 12.83C38.239 13.0033 37.899 13.09 37.5123 13.09ZM37.6823 12.44C38.1357 12.44 38.499 12.28 38.7723 11.96C39.0457 11.6333 39.1823 11.17 39.1823 10.57C39.1823 9.96333 39.0457 9.5 38.7723 9.18C38.499 8.86 38.1357 8.7 37.6823 8.7C37.2223 8.7 36.8557 8.86 36.5823 9.18C36.3157 9.5 36.1823 9.96333 36.1823 10.57C36.1823 11.17 36.3157 11.6333 36.5823 11.96C36.8557 12.28 37.2223 12.44 37.6823 12.44ZM46.5208 13.09C46.1341 13.09 45.7941 13.0033 45.5008 12.83C45.2141 12.6567 44.9974 12.42 44.8508 12.12V13H44.0608V5.95H44.8708V8.98C45.0108 8.69333 45.2274 8.46667 45.5208 8.3C45.8141 8.13333 46.1474 8.05 46.5208 8.05C46.9541 8.05 47.3308 8.15333 47.6508 8.36C47.9774 8.56 48.2274 8.85 48.4008 9.23C48.5808 9.60333 48.6708 10.05 48.6708 10.57C48.6708 11.0833 48.5808 11.53 48.4008 11.91C48.2274 12.2833 47.9774 12.5733 47.6508 12.78C47.3308 12.9867 46.9541 13.09 46.5208 13.09ZM46.3508 12.44C46.8041 12.44 47.1674 12.28 47.4408 11.96C47.7141 11.6333 47.8508 11.17 47.8508 10.57C47.8508 9.96333 47.7141 9.5 47.4408 9.18C47.1674 8.86 46.8041 8.7 46.3508 8.7C45.8974 8.7 45.5341 8.86 45.2608 9.18C44.9874 9.5 44.8508 9.96333 44.8508 10.57C44.8508 11.17 44.9874 11.6333 45.2608 11.96C45.5341 12.28 45.8974 12.44 46.3508 12.44ZM50.3825 14.8L51.2125 12.92L49.1625 8.14H50.0425L51.6525 12.08L53.2725 8.14H54.1225L51.2325 14.8H50.3825Z", fill: color }),
+    index.h("path", { d: "M80.9459 13.09C80.3926 13.09 79.8926 13.02 79.4459 12.88C78.9992 12.7333 78.6126 12.5233 78.2859 12.25L78.5759 11.59C78.9159 11.85 79.2726 12.0433 79.6459 12.17C80.0192 12.2967 80.4526 12.36 80.9459 12.36C81.5459 12.36 81.9892 12.25 82.2759 12.03C82.5692 11.8033 82.7159 11.5067 82.7159 11.14C82.7159 10.8467 82.6092 10.6133 82.3959 10.44C82.1892 10.2667 81.8392 10.13 81.3459 10.03L80.3059 9.82C79.6792 9.68667 79.2092 9.47 78.8959 9.17C78.5892 8.86333 78.4359 8.45667 78.4359 7.95C78.4359 7.53 78.5426 7.16333 78.7559 6.85C78.9759 6.53667 79.2792 6.29333 79.6659 6.12C80.0526 5.94667 80.4992 5.86 81.0059 5.86C81.4792 5.86 81.9192 5.93667 82.3259 6.09C82.7326 6.23667 83.0759 6.45 83.3559 6.73L83.0659 7.37C82.7659 7.09667 82.4492 6.9 82.1159 6.78C81.7826 6.65333 81.4092 6.59 80.9959 6.59C80.4692 6.59 80.0492 6.71333 79.7359 6.96C79.4226 7.2 79.2659 7.52 79.2659 7.92C79.2659 8.24 79.3626 8.49333 79.5559 8.68C79.7559 8.86667 80.0792 9.00333 80.5259 9.09L81.5659 9.31C82.2392 9.45 82.7359 9.66333 83.0559 9.95C83.3826 10.23 83.5459 10.6133 83.5459 11.1C83.5459 11.4933 83.4392 11.84 83.2259 12.14C83.0192 12.44 82.7192 12.6733 82.3259 12.84C81.9392 13.0067 81.4792 13.09 80.9459 13.09ZM86.2382 13.09C85.9049 13.09 85.6049 13.0267 85.3382 12.9C85.0782 12.7667 84.8716 12.5867 84.7182 12.36C84.5649 12.1333 84.4882 11.88 84.4882 11.6C84.4882 11.2467 84.5782 10.9667 84.7582 10.76C84.9449 10.5533 85.2482 10.4067 85.6682 10.32C86.0949 10.2267 86.6749 10.18 87.4082 10.18H87.7282V9.87C87.7282 9.45667 87.6416 9.16 87.4682 8.98C87.3016 8.79333 87.0316 8.7 86.6582 8.7C86.3649 8.7 86.0816 8.74333 85.8082 8.83C85.5349 8.91 85.2549 9.04333 84.9682 9.23L84.6882 8.64C84.9416 8.46 85.2482 8.31667 85.6082 8.21C85.9749 8.10333 86.3249 8.05 86.6582 8.05C87.2849 8.05 87.7482 8.20333 88.0482 8.51C88.3549 8.81667 88.5082 9.29333 88.5082 9.94V13H87.7482V12.16C87.6216 12.4467 87.4249 12.6733 87.1582 12.84C86.8982 13.0067 86.5916 13.09 86.2382 13.09ZM86.3682 12.48C86.7682 12.48 87.0949 12.3433 87.3482 12.07C87.6016 11.79 87.7282 11.4367 87.7282 11.01V10.71H87.4182C86.8782 10.71 86.4516 10.7367 86.1382 10.79C85.8316 10.8367 85.6149 10.9233 85.4882 11.05C85.3682 11.17 85.3082 11.3367 85.3082 11.55C85.3082 11.8233 85.4016 12.0467 85.5882 12.22C85.7816 12.3933 86.0416 12.48 86.3682 12.48ZM91.541 13.09C91.2076 13.09 90.9076 13.0267 90.641 12.9C90.381 12.7667 90.1743 12.5867 90.021 12.36C89.8676 12.1333 89.791 11.88 89.791 11.6C89.791 11.2467 89.881 10.9667 90.061 10.76C90.2476 10.5533 90.551 10.4067 90.971 10.32C91.3976 10.2267 91.9776 10.18 92.711 10.18H93.031V9.87C93.031 9.45667 92.9443 9.16 92.771 8.98C92.6043 8.79333 92.3343 8.7 91.961 8.7C91.6676 8.7 91.3843 8.74333 91.111 8.83C90.8376 8.91 90.5576 9.04333 90.271 9.23L89.991 8.64C90.2443 8.46 90.551 8.31667 90.911 8.21C91.2776 8.10333 91.6276 8.05 91.961 8.05C92.5876 8.05 93.051 8.20333 93.351 8.51C93.6576 8.81667 93.811 9.29333 93.811 9.94V13H93.051V12.16C92.9243 12.4467 92.7276 12.6733 92.461 12.84C92.201 13.0067 91.8943 13.09 91.541 13.09ZM91.671 12.48C92.071 12.48 92.3976 12.3433 92.651 12.07C92.9043 11.79 93.031 11.4367 93.031 11.01V10.71H92.721C92.181 10.71 91.7543 10.7367 91.441 10.79C91.1343 10.8367 90.9176 10.9233 90.791 11.05C90.671 11.17 90.611 11.3367 90.611 11.55C90.611 11.8233 90.7043 12.0467 90.891 12.22C91.0843 12.3933 91.3443 12.48 91.671 12.48ZM97.7037 13.09C97.1504 13.09 96.6504 13.02 96.2037 12.88C95.757 12.7333 95.3704 12.5233 95.0437 12.25L95.3337 11.59C95.6737 11.85 96.0304 12.0433 96.4037 12.17C96.777 12.2967 97.2104 12.36 97.7037 12.36C98.3037 12.36 98.747 12.25 99.0337 12.03C99.327 11.8033 99.4737 11.5067 99.4737 11.14C99.4737 10.8467 99.367 10.6133 99.1537 10.44C98.947 10.2667 98.597 10.13 98.1037 10.03L97.0637 9.82C96.437 9.68667 95.967 9.47 95.6537 9.17C95.347 8.86333 95.1937 8.45667 95.1937 7.95C95.1937 7.53 95.3004 7.16333 95.5137 6.85C95.7337 6.53667 96.037 6.29333 96.4237 6.12C96.8104 5.94667 97.257 5.86 97.7637 5.86C98.237 5.86 98.677 5.93667 99.0837 6.09C99.4904 6.23667 99.8337 6.45 100.114 6.73L99.8237 7.37C99.5237 7.09667 99.207 6.9 98.8737 6.78C98.5404 6.65333 98.167 6.59 97.7537 6.59C97.227 6.59 96.807 6.71333 96.4937 6.96C96.1804 7.2 96.0237 7.52 96.0237 7.92C96.0237 8.24 96.1204 8.49333 96.3137 8.68C96.5137 8.86667 96.837 9.00333 97.2837 9.09L98.3237 9.31C98.997 9.45 99.4937 9.66333 99.8137 9.95C100.14 10.23 100.304 10.6133 100.304 11.1C100.304 11.4933 100.197 11.84 99.9837 12.14C99.777 12.44 99.477 12.6733 99.0837 12.84C98.697 13.0067 98.237 13.09 97.7037 13.09ZM104.966 14.8V12.15C104.826 12.4367 104.609 12.6667 104.316 12.84C104.029 13.0067 103.696 13.09 103.316 13.09C102.883 13.09 102.503 12.9867 102.176 12.78C101.856 12.5733 101.606 12.2833 101.426 11.91C101.253 11.53 101.166 11.0833 101.166 10.57C101.166 10.05 101.253 9.60333 101.426 9.23C101.606 8.85 101.856 8.56 102.176 8.36C102.503 8.15333 102.883 8.05 103.316 8.05C103.703 8.05 104.043 8.13667 104.336 8.31C104.629 8.48333 104.846 8.72 104.986 9.02V8.14H105.776V14.8H104.966ZM103.486 12.44C103.939 12.44 104.303 12.28 104.576 11.96C104.849 11.6333 104.986 11.17 104.986 10.57C104.986 9.96333 104.849 9.5 104.576 9.18C104.303 8.86 103.939 8.7 103.486 8.7C103.026 8.7 102.659 8.86 102.386 9.18C102.119 9.5 101.986 9.96333 101.986 10.57C101.986 11.17 102.119 11.6333 102.386 11.96C102.659 12.28 103.026 12.44 103.486 12.44ZM109.016 13.09C107.849 13.09 107.266 12.4467 107.266 11.16V8.14H108.076V11.15C108.076 11.5833 108.163 11.9033 108.336 12.11C108.516 12.3167 108.796 12.42 109.176 12.42C109.589 12.42 109.926 12.2833 110.186 12.01C110.446 11.73 110.576 11.36 110.576 10.9V8.14H111.386V13H110.596V12.18C110.443 12.4733 110.226 12.7 109.946 12.86C109.673 13.0133 109.363 13.09 109.016 13.09ZM114.432 13.09C114.098 13.09 113.798 13.0267 113.532 12.9C113.272 12.7667 113.065 12.5867 112.912 12.36C112.758 12.1333 112.682 11.88 112.682 11.6C112.682 11.2467 112.772 10.9667 112.952 10.76C113.138 10.5533 113.442 10.4067 113.862 10.32C114.288 10.2267 114.868 10.18 115.602 10.18H115.922V9.87C115.922 9.45667 115.835 9.16 115.662 8.98C115.495 8.79333 115.225 8.7 114.852 8.7C114.558 8.7 114.275 8.74333 114.002 8.83C113.728 8.91 113.448 9.04333 113.162 9.23L112.882 8.64C113.135 8.46 113.442 8.31667 113.802 8.21C114.168 8.10333 114.518 8.05 114.852 8.05C115.478 8.05 115.942 8.20333 116.242 8.51C116.548 8.81667 116.702 9.29333 116.702 9.94V13H115.942V12.16C115.815 12.4467 115.618 12.6733 115.352 12.84C115.092 13.0067 114.785 13.09 114.432 13.09ZM114.562 12.48C114.962 12.48 115.288 12.3433 115.542 12.07C115.795 11.79 115.922 11.4367 115.922 11.01V10.71H115.612C115.072 10.71 114.645 10.7367 114.332 10.79C114.025 10.8367 113.808 10.9233 113.682 11.05C113.562 11.17 113.502 11.3367 113.502 11.55C113.502 11.8233 113.595 12.0467 113.782 12.22C113.975 12.3933 114.235 12.48 114.562 12.48ZM120.154 13.09C119.581 13.09 119.151 12.94 118.864 12.64C118.578 12.3333 118.434 11.8933 118.434 11.32V8.77H117.484V8.14H118.434V6.65H119.244V8.14H120.784V8.77H119.244V11.24C119.244 11.62 119.324 11.91 119.484 12.11C119.644 12.3033 119.904 12.4 120.264 12.4C120.371 12.4 120.478 12.3867 120.584 12.36C120.691 12.3333 120.788 12.3067 120.874 12.28L121.014 12.9C120.928 12.9467 120.801 12.99 120.634 13.03C120.468 13.07 120.308 13.09 120.154 13.09ZM123.712 13.09C123.225 13.09 122.805 12.9867 122.452 12.78C122.098 12.5667 121.825 12.27 121.632 11.89C121.445 11.5033 121.352 11.0533 121.352 10.54C121.352 9.76667 121.562 9.16 121.982 8.72C122.402 8.27333 122.978 8.05 123.712 8.05C124.012 8.05 124.308 8.10333 124.602 8.21C124.895 8.31667 125.138 8.46667 125.332 8.66L125.052 9.25C124.858 9.06333 124.645 8.92667 124.412 8.84C124.185 8.75333 123.968 8.71 123.762 8.71C123.255 8.71 122.865 8.87 122.592 9.19C122.318 9.50333 122.182 9.95667 122.182 10.55C122.182 11.13 122.318 11.59 122.592 11.93C122.865 12.2633 123.255 12.43 123.762 12.43C123.968 12.43 124.185 12.3867 124.412 12.3C124.645 12.2133 124.858 12.0733 125.052 11.88L125.332 12.47C125.138 12.6633 124.892 12.8167 124.592 12.93C124.298 13.0367 124.005 13.09 123.712 13.09ZM126.281 13V5.95H127.091V8.94C127.251 8.64667 127.474 8.42667 127.761 8.28C128.054 8.12667 128.381 8.05 128.741 8.05C129.894 8.05 130.471 8.69 130.471 9.97V13H129.661V10.02C129.661 9.56667 129.571 9.23667 129.391 9.03C129.217 8.81667 128.937 8.71 128.551 8.71C128.104 8.71 127.747 8.85 127.481 9.13C127.221 9.40333 127.091 9.77 127.091 10.23V13H126.281Z", fill: color }),
+    index.h("defs", null,
+      index.h("clipPath", { id: "clip0" },
+        index.h("rect", { width: "14", height: "16", fill: "white", transform: "translate(59.5 1)" })))));
+}
+
+const vanillaStyle$4 = `
+  :host{
+    margin: 0 auto;
+    width: 100%;
+  }
+  a{
+    cursor:pointer;
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+function PortalFooterView(props) {
+  const style = {
+    RowContainer: {
+      display: "flex",
+      "& > :not(:last-child)": {
+        "margin-right": "var(--sl-spacing-large)",
+      },
+    },
+    Container: {
+      display: "flex",
+      "flex-direction": "column",
+      "align-items": "center",
+      "font-size": "var(--sl-font-size-small)",
+      color: "var(--sl-color-gray-600)",
+      "padding-top": `var(--sl-spacing-${props.paddingTop})`,
+      "padding-right": `var(--sl-spacing-${props.paddingRight})`,
+      "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
+      "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
+      "row-gap": `var(--sl-spacing-small)`,
+      "& a:hover": {
+        color: "var(--sl-color-gray-900)",
+      },
+    },
+    SupportText: {
+      textAlign: "center",
+      margin: 0,
+    },
+    PoweredByLink: {
+      color: "var(--sl-color-gray-400)",
+      "font-size": "var(--sl-font-size-xx-small)",
+      "&:hover": {
+        color: "var(--sl-color-gray-900)",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$4,
+      styleString),
+    index.h("div", { class: sheet.classes.RowContainer },
+      props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
+      props.termsLink && (index.h("a", { target: "_blank", href: props.termsLink }, props.termsText))),
+    !props.hideSupportText && (index.h("p", { class: sheet.classes.SupportText }, global.intl.formatMessage({
+      id: "supportFooter",
+      defaultMessage: props.supportText,
+    }, {
+      email: (index.h("a", { target: "_blank", href: `mailto:${props.supportEmail}` }, props.supportEmail)),
+    }))),
+    !props.hidePoweredBy && (index.h("a", { class: sheet.classes.PoweredByLink, target: "_blank", href: props.poweredByLink },
+      index.h(PoweredByImg, null)))));
+}
+
+// import { IntlMessageFormat } from 'intl-messageformat';
+function isMobile(breakPoint) {
+  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
+  const handleWindowResize = index_module.useCallback(() => setWidth(window.innerWidth), []);
+  stencilHooks_module.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+  return width > breakPoint ? false : true;
+}
+function isValidColor(teststr) {
+  return CSS.supports(`(color: ${teststr})`);
+}
+
+const paddingList = [
+  "var(--sl-spacing-xxx-small)",
+  "var(--sl-spacing-xx-small)",
+  "var(--sl-spacing-x-small)",
+  "var(--sl-spacing-small)",
+  "var(--sl-spacing-medium)",
+  "var(--sl-spacing-large)",
+  "var(--sl-spacing-x-large)",
+  "var(--sl-spacing-xx-large)",
+  "var(--sl-spacing-xxx-large)",
+  "var(--sl-spacing-xxxx-large)",
+];
+const parseBackground = (provided_bg) => {
+  if (provided_bg) {
+    if (isValidColor(provided_bg)) {
+      return provided_bg;
+    }
+    else {
+      return `url(${provided_bg})`;
+    }
+  }
+  else {
+    return "";
+  }
+};
+function HeroView(props) {
+  const { states, content } = props;
+  const getVertivalPadding = (size, half) => {
+    const sizes = {
+      small: 7,
+      medium: 8,
+      large: 9,
+    };
+    var index = sizes[size];
+    if (isMobile(767)) {
+      index = index - 2;
+    }
+    else if (isMobile(1023)) {
+      index = index - 1;
+    }
+    return half ? paddingList[index - 2] : paddingList[index];
+  };
+  const getHorizontalPadding = (size) => {
+    if (size == "small") {
+      return "1%";
+    }
+    else if (size == "medium") {
+      return "3%";
+    }
+    else {
+      return "5%";
+    }
+  };
+  // Dependent on props, not feasiable to move out
+  const style = {
+    TwoColumnContainer: {
+      display: "flex",
+      "@media screen and (max-width: 1023px)": {
+        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
+        justfiyContent: "center",
+      },
+    },
+    ColumnPadding: {
+      paddingTop: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingBottom: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingLeft: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+      paddingRight: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+    },
+    ColumnWrapper: {
+      "&:first-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      },
+      "&:last-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
+      },
+      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      minHeight: `${states.minHeight}px`,
+      display: "block",
+    },
+    SingleColumnContainer: {
+      background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      minHeight: `${states.minHeight}px`,
+    },
+    Container: {
+      width: "100%",
+      maxWidth: "var(--sqm-max-width)",
+      margin: "0 auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
+      index.h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      index.h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+}
+
 function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
@@ -2434,17 +2711,17 @@ const style$9 = {
     },
   },
 };
-const vanillaStyle$3 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+const vanillaStyle$5 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+sl-input::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
 `;
 const sheet$9 = JSS.createStyleSheet(style$9);
 const styleString$9 = sheet$9.toString();
@@ -2454,7 +2731,7 @@ function NameFieldsView(props) {
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (index.h("div", { class: sheet$9.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
-      vanillaStyle$3,
+      vanillaStyle$5,
       styleString$9),
     index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
@@ -2497,20 +2774,20 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$4 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
+const vanillaStyle$6 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
 `;
 JSS.jss.setup(JSS.create());
 const sheet$a = JSS.jss.createStyleSheet(style$a);
@@ -2519,9 +2796,9 @@ function CheckboxFieldView(props) {
   var _a, _b, _c;
   const { states, content, callbacks } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$a.classes.FieldContainer },
+  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$4,
+      vanillaStyle$6,
       styleString$a),
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
@@ -2559,16 +2836,16 @@ const style$b = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+const vanillaStyle$7 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-select::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
 `;
 JSS.jss.setup(JSS.create());
 const sheet$b = JSS.jss.createStyleSheet(style$b);
@@ -2577,9 +2854,9 @@ function DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$b.classes.FieldContainer },
+  return (index.h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$5,
+      vanillaStyle$7,
       styleString$b),
     index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
@@ -2600,12 +2877,12 @@ const style$c = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
+const vanillaStyle$8 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
 `;
 JSS.jss.setup(JSS.create());
 const sheet$c = JSS.jss.createStyleSheet(style$c);
@@ -2614,9 +2891,9 @@ function InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$c.classes.FieldContainer },
+  return (index.h("div", { class: sheet$c.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$6,
+      vanillaStyle$8,
       styleString$c),
     index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
@@ -3118,7 +3395,7 @@ function RewardExchangeView(props) {
   function chooseReward() {
     var _a;
     return [
-      index.h("div", null,
+      index.h("div", { part: "choose-reward-container" },
         index.h("div", { class: sheet$d.classes.Title }, states.content.text.rewardTitle),
         states.loading || states.queryError ? (loading()) : (index.h("div", { class: sheet$d.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
           var _a, _b, _c, _d, _e;
@@ -3197,7 +3474,7 @@ function RewardExchangeView(props) {
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", { class: sheet$d.classes.ChooseAmount },
+      index.h("div", { class: sheet$d.classes.ChooseAmount, part: "choose-amount-container" },
         index.h("div", { class: "wrapper" },
           index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
               index.getAssetPath("./assets/Reward-image.png") }),
@@ -3214,7 +3491,7 @@ function RewardExchangeView(props) {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (index.h("div", null,
-      index.h("div", { class: sheet$d.classes.Confirmation },
+      index.h("div", { class: sheet$d.classes.Confirmation, part: "confirmation-container" },
         index.h("div", { class: sheet$d.classes.Title }, states.content.text.redeemTitle),
         index.h("div", { class: "wrapper" },
           index.h("div", { class: "field" }, states.content.text.rewardNameTitle),
@@ -3236,7 +3513,7 @@ function RewardExchangeView(props) {
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
-    return (index.h("div", { class: sheet$d.classes.Success },
+    return (index.h("div", { class: sheet$d.classes.Success, part: "success-container" },
       index.h(Gift$1, null),
       index.h(Confetti, null),
       index.h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
@@ -3250,7 +3527,7 @@ function RewardExchangeView(props) {
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (index.h("div", { class: "promo" },
         states.content.text.promoCode,
-        index.h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        index.h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       index.h("div", { class: sheet$d.classes.Button },
         index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -3275,7 +3552,7 @@ function RewardExchangeView(props) {
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (index.h("div", { class: sheet$d.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+    return (index.h("div", { class: sheet$d.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
       return (index.h("div", null,
         index.h("sl-card", { class: sheet$d.classes.Card },
           index.h("div", { class: sheet$d.classes.CardLayout },
@@ -3314,7 +3591,7 @@ function RewardExchangeView(props) {
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (index.h("div", { class: sheet$d.classes.Container },
+  return (index.h("div", { class: sheet$d.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$d),
     index.h("div", null,
       stageMap(),
@@ -3718,17 +3995,44 @@ function CardFeedView(props, children) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
-
+  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 }, children)));
+    index.h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
+}
+
+const style$e = {
+  HostBlock: mixins.HostBlock,
+  couponCodeLabel: {
+    margin: "var(--sl-spacing-x-small) 0",
+    color: "var(--sl-color-gray-500)",
+    fontSize: "var(--sl-font-size-small)",
+  },
+};
+const vanillaStyle$9 = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const sheet$e = JSS.createStyleSheet(style$e);
+const styleString$e = sheet$e.toString();
+function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString$e,
+      vanillaStyle$9),
+    index.h("p", { class: sheet$e.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    error ? (index.h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
+      index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(CopyTextView, Object.assign({}, props)))));
 }
 
 function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
@@ -3819,21 +4123,25 @@ const ShadowViewAddon = ({ story }, children) => {
 exports.BigStatView = BigStatView;
 exports.CardFeedView = CardFeedView;
 exports.CheckboxFieldView = CheckboxFieldView;
+exports.CopyTextView = CopyTextView;
+exports.CouponCodeView = CouponCodeView;
 exports.DropdownFieldView = DropdownFieldView;
 exports.EditProfileView = EditProfileView;
+exports.HeroView = HeroView;
 exports.InputFieldView = InputFieldView;
 exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;
 exports.PortalChangePasswordView = PortalChangePasswordView;
+exports.PortalFooterView = PortalFooterView;
 exports.PortalFrameView = PortalFrameView;
 exports.PortalLoginView = PortalLoginView;
 exports.PortalRegisterView = PortalRegisterView;
+exports.PoweredByImg = PoweredByImg;
 exports.ProgressBarView = ProgressBarView;
 exports.ReferralIframeView = ReferralIframeView;
 exports.RewardExchangeView = RewardExchangeView;
 exports.ShadowViewAddon = ShadowViewAddon;
 exports.ShareButtonView = ShareButtonView;
-exports.ShareLinkView = ShareLinkView;
 exports.StatContainerView = StatContainerView;
 exports.TaskCardView = TaskCardView;
 exports.autoColorScaleCss = autoColorScaleCss;