@saasquatch/mint-components 1.6.2-9 → 1.6.3-1

package/dist/esm/{ShadowViewAddon-846aecda.js → ShadowViewAddon-d4705dae.js}

@@ -1,16 +1,16 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
 import { i as useState, b as browser, k as useMemo } from './stencil-hooks.module-eefa3570.js';
-import { i as intl } from './global-44835899.js';
-import { d as dist, W, _ as _$1, a as dn, I as Ie, Q, k as getEnvironmentSDK, H } from './index.module-132e274f.js';
+import { i as intl } from './global-126fa55c.js';
+import { d as dist, O, N, a as dn, P as Pe, U, g as getEnvironmentSDK, x } from './index.module-14794b69.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
-import { c as createStyleSheet, j as jss, a as create } from './JSS-f00f9536.js';
-import { u as useChildElements } from './useChildElements-9431f3e2.js';
+import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
+import { u as useChildElements } from './useChildElements-d574b0ce.js';
 import { l as luxon } from './luxon-5a398612.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
-import { T as TextSpanView } from './sqm-text-span-view-0ba1484d.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-ca454627.js';
-import { P as PortalSectionView } from './sqm-portal-section-view-6c249c74.js';
+import { T as TextSpanView } from './sqm-text-span-view-2567b6c0.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-21bd84e0.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-a991e019.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -36,48 +36,48 @@ const style = {
 const sheet = 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 ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
@@ -130,10 +130,10 @@ const style$1 = {
 };
 const sheet$1 = 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;
@@ -240,11 +240,7 @@ function BigStatView(props) {
 
 const style$3 = {
   HostBlock: HostBlock,
-  ":host": {
-    "min-height": "100vh",
-  },
   Frame: {
-    "min-height": "100vh",
     display: "flex",
     "flex-direction": "column",
     "box-sizing": "border-box",
@@ -279,8 +275,8 @@ const style$3 = {
 const sheet$3 = createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
-  const { data } = props;
-  return (h("div", { class: sheet$3.classes.Frame },
+  const { data, notFullScreen } = props;
+  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame },
     h("style", { type: "text/css" }, styleString$3),
     h("div", { class: sheet$3.classes.HeaderWrapper },
       data.header,
@@ -343,27 +339,27 @@ const EditProfileView = (props) => {
       }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
 };
 
-const MessageLinkQuery = dist.gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        shareLink(programId: $programId)
-      }
-    }
-  }
+const MessageLinkQuery = dist.gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        shareLink(programId: $programId)
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT = dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = W() } = props;
-  const user = _$1();
-  const engagementMedium = Q();
+  const { programId = O() } = props;
+  const user = N();
+  const engagementMedium = U();
   const { data } = dn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = Ie(WIDGET_ENGAGEMENT_EVENT);
+  const [sendLoadEvent] = 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 : 
   // Shown during loading
   "...";
@@ -390,23 +386,23 @@ function useShareLink(props) {
   return { ...props, onClick, open, shareString };
 }
 
-const MessageLinkQuery$1 = 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 = 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";
@@ -448,10 +444,10 @@ function GenericShare(res) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : W();
-  const user = _$1();
+  const programId = props.programId ? props.programId : O();
+  const user = N();
   const variables = {
-    engagementMedium: Q(),
+    engagementMedium: U(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
@@ -793,16 +789,16 @@ _, status) => {
       ? { dateConverted_exists: false }
       : {};
   const queryFilter = { ...programFilter, ...convertedFilter };
-  return debugQuery(dist.gql `
-      query ($queryFilter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $queryFilter) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(dist.gql `
+      query ($queryFilter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $queryFilter) {
+              totalCount
+            }
+          }
+        }
+      }
     `, { queryFilter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
@@ -815,19 +811,19 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
   if (programId === "classic")
     return null;
-  return debugQuery(dist.gql `
-      query {
-        viewer {
-          ... on User {
-            programGoals {
-              goalId
-              programId
-              count
-              conversionCount
-            }
-          }
-        }
-      }
+  return debugQuery(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);
@@ -838,14 +834,14 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   });
 };
 const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
-  return debugQuery(dist.gql `
-      query {
-        viewer {
-          ... on User {
-            customFields
-          }
-        }
-      }
+  return debugQuery(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];
@@ -863,16 +859,16 @@ const referralsMonthQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
     `, { filter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
@@ -889,16 +885,16 @@ const referralsWeekQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(dist.gql `
-      query ($filter: ReferralFilterInput) {
-        viewer {
-          ... on User {
-            referrals(filter: $filter) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(dist.gql `
+      query ($filter: ReferralFilterInput) {
+        viewer {
+          ... on User {
+            referrals(filter: $filter) {
+              totalCount
+            }
+          }
+        }
+      }
     `, { filter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
@@ -910,16 +906,16 @@ const referralsWeekQuery = (programId) => {
 const rewardsCountQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(filter: { programId_eq: $programId }) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(dist.gql `
+      query ($programId: ID) {
+        viewer {
+          ... on User {
+            rewards(filter: { programId_eq: $programId }) {
+              totalCount
+            }
+          }
+        }
+      }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
   }, (res) => {
@@ -934,28 +930,28 @@ const rewardsCountFilteredQuery = (programId,
 // locale
 _, type, unit, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(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(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,
@@ -973,22 +969,22 @@ const integrationRewardsCountFilteredQuery = (programId,
 // locale
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(dist.gql `
-      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                type_eq: INTEGRATION
-                statuses_eq: $statusFilter
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(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,
@@ -1003,21 +999,21 @@ _, status, global = "") => {
 const rewardsMonthQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                dateGiven_timeframe: "this_month"
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(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) => {
@@ -1031,21 +1027,21 @@ _, global = "") => {
 const rewardsWeekQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(dist.gql `
-      query ($programId: ID) {
-        viewer {
-          ... on User {
-            rewards(
-              filter: {
-                programId_eq: $programId
-                dateGiven_timeframe: "this_week"
-              }
-            ) {
-              totalCount
-            }
-          }
-        }
-      }
+  return debugQuery(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) => {
@@ -1057,33 +1053,33 @@ _, global = "") => {
   });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(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(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,
@@ -1100,33 +1096,33 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(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(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,
@@ -1143,33 +1139,33 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(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(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,
@@ -1191,34 +1187,34 @@ const parseRewardValueFormat = {
 };
 const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
   var _a;
-  return debugQuery(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(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,11 +1328,11 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = W(), } = props;
+  const { statType, flexReverse, alignment, programId = O(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements();
-  const locale = H();
-  const userIdent = _$1();
+  const locale = x();
+  const userIdent = N();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1541,13 +1537,13 @@ const style$4 = {
   },
   ButtonsContainer: AuthButtonsContainer,
 };
-const vanillaStyle$1 = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle$1 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet$4 = createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
@@ -1581,20 +1577,20 @@ const style$5 = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$2 = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
+const vanillaStyle$2 = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
 `;
 const sheet$5 = createStyleSheet(style$5);
 const styleString$5 = sheet$5.toString();
@@ -1621,18 +1617,17 @@ function PortalRegisterView(props) {
           if (!value.includes("@")) {
             return "Must be a valid email address";
           }
-        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        } }, (((_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.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           "Cannot be empty",
       }
         : [])))),
-      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
+      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (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.validationState) === 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) || "Cannot be empty",
       }
         : [])))),
       content.terms,
@@ -2302,11 +2297,11 @@ 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 (h("div", { class: sheet$8.classes.TaskCard },
     h("style", { type: "text/css" },
@@ -2433,38 +2428,38 @@ 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$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 sheet$9 = createStyleSheet(style$9);
 const styleString$9 = sheet$9.toString();
 function NameFieldsView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet$9.classes.FieldsContainer },
     h("style", { type: "text/css" },
       vanillaStyle$3,
       styleString$9),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled) }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.firstName) ? {
-      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.firstName,
+    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,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
       class: sheet$9.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.loading) || ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.disabled) }, (((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.initialData) === null || _k === void 0 ? void 0 : _k.lastName) ? {
-      value: (_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.lastName,
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
       class: sheet$9.classes.ErrorStyle,
@@ -2496,27 +2491,28 @@ 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$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;
+}
 `;
 jss.setup(create());
 const sheet$a = jss.createStyleSheet(style$a);
 const styleString$a = sheet$a.toString();
 function CheckboxFieldView(props) {
+  var _a, _b, _c;
   const { states, content, callbacks } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet$a.classes.FieldContainer },
     h("style", { type: "text/css" },
       vanillaStyle$4,
@@ -2524,7 +2520,7 @@ function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { 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) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet$a.classes.ErrorStyle,
       }
@@ -2557,28 +2553,32 @@ 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$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);
+}
 `;
 jss.setup(create());
 const sheet$b = jss.createStyleSheet(style$b);
 const styleString$b = sheet$b.toString();
 function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet$b.classes.FieldContainer },
     h("style", { type: "text/css" },
       vanillaStyle$5,
       styleString$b),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    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],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet$b.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
@@ -2594,24 +2594,28 @@ const style$c = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
+const vanillaStyle$6 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
 `;
 jss.setup(create());
 const sheet$c = jss.createStyleSheet(style$c);
 const styleString$c = sheet$c.toString();
 function InputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet$c.classes.FieldContainer },
     h("style", { type: "text/css" },
       vanillaStyle$6,
       styleString$c),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+    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],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet$c.classes.ErrorStyle,
       helpText: intl.formatMessage({
         id: `errorMessage-${content.fieldName}`,
@@ -3708,11 +3712,11 @@ function CardFeedView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
-
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
   `;
   return (h("div", null,
     h("style", { type: "text/css" },