@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

package/dist/esm/sqm-card-feed-view-e83d37f1.js

@@ -0,0 +1,29 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
+
+function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container }, children)));
+}
+
+export { CardFeedView as C };

package/dist/esm/sqm-card-feed.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
+import { m as h } from './extends-33266e9b.js';
+import './JSS-fadfaeff.js';
+import { g as getProps } from './utils-454405f5.js';
+import { C as CardFeedView } from './sqm-card-feed-view-e83d37f1.js';
+
+const CardFeed = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h$1(CardFeedView, Object.assign({}, getProps(this)), h$1("slot", null)));
+  }
+};
+
+export { CardFeed as sqm_card_feed };

package/dist/esm/sqm-graphql-client-provider.entry.js

@@ -1,15 +1,15 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { o as m, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { Q, k, g as pe, h as ge } from './index.module-90d2c3ad.js';
+import { o as m, e as useEffect, m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { f as ee, j, g as Pe, q as qe } from './index.module-6d78e252.js';
 
 async function useGraphQLClientProvider({ domain }) {
-  const token = Q();
+  const token = ee();
   const appDomain = domain;
-  const tenantAlias = k();
+  const tenantAlias = j();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = pe(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = m(ge, managedIdentityClient);
+  const managedIdentityClient = Pe(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = m(qe, managedIdentityClient);
   useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

package/dist/esm/{sqm-hero-view-bfd8abd1.js → sqm-hero-view-190b8e58.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { j as useState, e as useEffect } from './extends-3a3f9fe2.js';
-import { u as useCallback } from './use-callback-b38a1523.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { k as useState, e as useEffect } from './extends-33266e9b.js';
+import { u as useCallback } from './use-callback-52b52f6a.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
@@ -116,8 +116,7 @@ function HeroView(props) {
       minHeight: "100%",
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
   :host{    

package/dist/esm/sqm-hero.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import './JSS-fadfaeff.js';
 import { g as getProps } from './utils-454405f5.js';
-import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
+import { H as HeroView } from './sqm-hero-view-190b8e58.js';
 
 const Hero = class {
   constructor(hostRef) {

package/dist/esm/{sqm-leaderboard-rank-view-47844836.js → sqm-leaderboard-rank-view-b3b050de.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { _ as __assign } from './global-90da933f.js';
-import { p as parse } from './index.module-90d2c3ad.js';
+import { _ as __assign } from './global-9b000c0b.js';
+import { e as parse } from './index.module-6d78e252.js';
 
 var docCache = new Map();
 var fragmentSourceMap = new Map();

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import { i as intl, c as createIntl } from './global-90da933f.js';
-import './use-callback-b38a1523.js';
-import { M, T, e as en, j } from './index.module-90d2c3ad.js';
+import { m as h } from './extends-33266e9b.js';
+import { i as intl, c as createIntl } from './global-9b000c0b.js';
+import './use-callback-52b52f6a.js';
+import { M, n as ne, a as mn, k } from './index.module-6d78e252.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-47844836.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-b3b050de.js';
 
 const GET_RANK = gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -22,7 +22,7 @@ const GET_RANK = gql `
 function useLeaderboardRank(props) {
   var _a, _b, _c;
   const programId = M();
-  const user = T();
+  const user = ne();
   const rankVariables = {
     type: props.leaderboardType,
     filter: { programId_eq: programId },
@@ -30,7 +30,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = en(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = mn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank) ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c[props.rankType],
   })
@@ -55,7 +55,7 @@ const LeaderboardRank = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = j()
+    const props = k()
       ? useLeaderboardRankDemo(this)
       : useLeaderboardRank(this);
     return h$1(LeaderboardRankView, Object.assign({}, props));

package/dist/esm/sqm-leaderboard.entry.js

@@ -1,32 +1,39 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { j } from './index.module-90d2c3ad.js';
+import { m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { k } from './index.module-6d78e252.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { w as withShadowView, u as useLeaderboard, L as LeaderboardView } from './ShadowViewAddon-a3f510db.js';
+import { w as withShadowView, u as useLeaderboard, c as LeaderboardView, L as LoadingSlot, a as EmptySkeleton, b as LoadingSkeleton } from './ShadowViewAddon-83479740.js';
 
-const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-x-small) var(--sl-spacing-small)}.User{width:100%}.Score{width:auto;white-space:nowrap}";
+const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}.header-title{font-size:var(--sl-font-size-large);font-weight:var(--sl-font-weight-semibold)}.header-description{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal);margin-bottom:var(--sl-spacing-large)}.cover-image{width:100%;margin-bottom:var(--sl-spacing-large)}table{width:100%;border-collapse:collapse}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}tr:not(:first-child){border-top:1px solid var(--sl-color-neutral-200)}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}.ellipses{text-align:center;padding:0;color:var(--sl-color-neutral-500)}.highlight{background:var(--sl-color-primary-50)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-medium)}th{padding:var(--sl-spacing-medium);padding-top:0}.User{width:100%}.Score{width:auto;white-space:nowrap}";
 
 const Leaderboard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @uiName Show viewing user's rank
+     */
+    this.showUser = true;
     this.ignored = true;
     h(this);
     withShadowView(this);
   }
   disconnectedCallback() { }
   render() {
+    const loading = h$1(LoadingSlot, null);
+    const empty = h$1(EmptySkeleton, { label: "No Users Yet" });
     const props = {
-      empty: h$1("slot", { name: "empty" }),
-      loadingstate: h$1("slot", { name: "loading" }),
+      empty: empty,
+      loadingstate: loading,
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankType: this.rankType,
       leaderboardType: this.leaderboardType,
       interval: this.interval,
+      showUser: this.showUser,
     };
     const demoProps = { ...props, demoData: this.demoData };
-    const viewprops = j()
+    const viewprops = k()
       ? useLeaderboardDemo(demoProps)
       : useLeaderboard(props);
     return h$1(LeaderboardView, Object.assign({}, viewprops));
@@ -55,8 +62,8 @@ function useLeaderboardDemo(props) {
       ],
     },
     elements: {
-      empty: props.empty ? props.empty : h$1("div", null, "Empty"),
-      loadingstate: props.loadingstate ? (props.loadingstate) : (h$1("div", null, "Loading")),
+      empty: props.empty ? (props.empty) : (h$1(EmptySkeleton, { label: "No Users Yet" })),
+      loadingstate: props.loadingstate ? (props.loadingstate) : (h$1(LoadingSkeleton, null)),
     },
   }, props.demoProps || {}, { arrayMerge: (_, a) => a });
 }

package/dist/esm/sqm-media-view-0f1e093a.js

@@ -0,0 +1,105 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
+
+function MediaView(props, children) {
+  const overlay = Boolean(props.imageHeader || props.imageDescription);
+  const showButton = Boolean(props.buttonText || props.buttonLink);
+  const style = {
+    Container: {
+      position: "relative",
+      maxWidth: props.width ? props.width : "100%",
+      maxHeight: props.height ? props.height : "100%",
+      "&:before": {
+        content: overlay ? '""' : "",
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        background: "var(--sl-color-primary-900)",
+        opacity: "0.75",
+      },
+    },
+    Image: {
+      display: "block",
+      maxWidth: "inherit",
+      maxHeight: "inherit",
+      objectFit: props.objectFit ? props.objectFit : "cover",
+    },
+    Center: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      textAlign: "center",
+      transform: "translate(-50%, -50%)",
+    },
+    ImageHeader: {
+      color: "var(--sl-color-neutral-0)",
+      fontSize: "var(--sl-font-size-xxx-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      "@media (max-width: 899px)": {
+        fontSize: "var(--sl-font-size-x-large)",
+      },
+      "@media (max-width: 499px)": {
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "@media (max-width: 399px)": {
+        fontSize: "var(--sl-font-size-x-small)",
+      },
+    },
+    ImageDescription: {
+      color: "var(--sl-color-neutral-0)",
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      "@media (max-width: 899px)": {
+        fontSize: "var(--sl-font-size-medium)",
+      },
+      "@media (max-width: 499px)": {
+        fontSize: "var(--sl-font-size-x-small)",
+      },
+      "@media (max-width: 399px)": {
+        fontSize: "var(--sl-font-size-xx-small)",
+      },
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+    },
+    Button: {
+      marginTop: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-small)",
+        transform: "scale(0.75)",
+      },
+      "@media (max-width: 399px)": {
+        marginTop: "0",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{
+    display: block;
+  }`;
+  return (h("div", null,
+    props.header && h("div", { class: sheet.classes.Header }, props.header),
+    props.description && (h("div", { class: sheet.classes.Description }, props.description)),
+    h("div", { class: sheet.classes.Container },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      props.imgUrl && (h("img", { class: sheet.classes.Image, src: props.imgUrl })),
+      h("div", { class: sheet.classes.Center },
+        props.imageHeader && (h("div", { class: sheet.classes.ImageHeader }, props.imageHeader)),
+        props.imageDescription && (h("div", { class: sheet.classes.ImageDescription }, props.imageDescription)),
+        showButton && (h("div", { class: sheet.classes.Button },
+          h("sl-button", { type: "primary", onClick: () => props.buttonNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent") }, props.buttonText))))),
+    children));
+}
+
+export { MediaView as M };

package/dist/esm/sqm-media.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
+import { m as h } from './extends-33266e9b.js';
+import './JSS-fadfaeff.js';
+import { g as getProps } from './utils-454405f5.js';
+import { M as MediaView } from './sqm-media-view-0f1e093a.js';
+
+const Media = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h$1(MediaView, Object.assign({}, getProps(this)));
+  }
+};
+
+export { Media as sqm_media };

package/dist/esm/{sqm-name-fields-view-4162fb7b.js → sqm-name-fields-view-090297a3.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { E as ErrorStyles } from './mixins-10353a39.js';
 
 const style = {
@@ -27,8 +27,7 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function NameFieldsView(props) {
   const { states } = props;

package/dist/esm/sqm-name-fields.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as d, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { j } from './index.module-90d2c3ad.js';
-import './jss-preset-default.esm-71fae192.js';
+import { n as d, m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { k } from './index.module-6d78e252.js';
+import './JSS-fadfaeff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
+import { N as NameFieldsView } from './sqm-name-fields-view-090297a3.js';
 
 const CONTEXT_NAME = "sq:validation-state";
 function useNameFields(props) {
@@ -37,7 +37,7 @@ const NameFields = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states } = j() ? useNameFieldsDemo(this) : useNameFields(this);
+    const { states } = k() ? useNameFieldsDemo(this) : useNameFields(this);
     return h$1(NameFieldsView, { states: states });
   }
 };

package/dist/esm/{sqm-navigation-sidebar-item-view-f2304ad9.js → sqm-navigation-sidebar-item-view-61f5dc0e.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { r as rn } from './index.module-90d2c3ad.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { p as pn } from './index.module-6d78e252.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { g as gap } from './mixins-10353a39.js';
 
 function NavigationSidebarItemView(props) {
@@ -17,7 +17,9 @@ function NavigationSidebarItemView(props) {
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
-        background: states.active ? "var(--sl-color-gray-300)" : "var(--sl-color-gray-50)",
+        background: states.active
+          ? "var(--sl-color-gray-300)"
+          : "var(--sl-color-gray-50)",
       },
     },
     Label: {
@@ -27,12 +29,11 @@ function NavigationSidebarItemView(props) {
       "flex-shrink": "0",
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("a", { href: data.path, onClick: (e) => {
       e.preventDefault();
-      rn.push(data.path);
+      pn.push(data.path);
     }, class: sheet.classes.ItemContainer },
     h("style", { type: "text/css" }, styleString),
     h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),

package/dist/esm/sqm-navigation-sidebar-item.entry.js

@@ -1,15 +1,15 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { c as an, j } from './index.module-90d2c3ad.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { h as hn, k } from './index.module-6d78e252.js';
+import './JSS-fadfaeff.js';
 import { g as getProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-f2304ad9.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-61f5dc0e.js';
 
 function useNavigationSidebarItem(props) {
-  const currentPage = an();
+  const currentPage = hn();
   return {
     states: {
       active: currentPage.pathname === props.path,
@@ -29,7 +29,7 @@ const NavigationSidebarItem = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = j()
+    const props = k()
       ? useSidebarItemDemo(getProps(this))
       : useNavigationSidebarItem(getProps(this));
     return h$1(NavigationSidebarItemView, Object.assign({}, props));

package/dist/esm/{sqm-navigation-sidebar-view-2242502c.js → sqm-navigation-sidebar-view-6e25cc0f.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { g as gap } from './mixins-10353a39.js';
 
 const style = {
@@ -18,8 +18,7 @@ const vanillaStyle = `
     max-width: 320px;
   }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function NavigationSidebarView(
 // @ts-ignore - Stencil requires props (even if empty)

package/dist/esm/sqm-navigation-sidebar.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './extends-33266e9b.js';
+import './JSS-fadfaeff.js';
 import './mixins-10353a39.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-6e25cc0f.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {

package/dist/esm/sqm-popup-container.entry.js

@@ -1,7 +1,7 @@
 import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
-import { m as h$1 } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { x } from './index.module-90d2c3ad.js';
+import { m as h$1 } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { x } from './index.module-6d78e252.js';
 import { g as getProps } from './utils-454405f5.js';
 
 const PopupContainerView = (props) => {

package/dist/esm/{sqm-portal-email-verification-view-8cefe480.js → sqm-portal-email-verification-view-0f31f9e3.js}

@@ -1,8 +1,8 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-90da933f.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { i as intl } from './global-9b000c0b.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-10353a39.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { T as TextSpanView } from './sqm-text-span-view-b5233612.js';
 
 const style = {
   Wrapper: AuthWrapper,
@@ -16,11 +16,10 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalEmailVerificationView(props) {
-  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText }, } = props;
+  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, }, } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle,

package/dist/esm/sqm-portal-email-verification.entry.js

@@ -1,18 +1,18 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './global-90da933f.js';
-import './use-callback-b38a1523.js';
-import { B as Be, T, j } from './index.module-90d2c3ad.js';
-import './jss-preset-default.esm-71fae192.js';
+import { k as useState, e as useEffect, m as h } from './extends-33266e9b.js';
+import './global-9b000c0b.js';
+import './use-callback-52b52f6a.js';
+import { u as un, n as ne, k } from './index.module-6d78e252.js';
+import './JSS-fadfaeff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import './sqm-text-span-view-1781df94.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8cefe480.js';
+import './sqm-text-span-view-b5233612.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-0f31f9e3.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;
-  const [request, { loading, data, errors }] = Be();
-  const userIdent = T();
+  const [request, { loading, data, errors }] = un();
+  const userIdent = ne();
   const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
@@ -23,7 +23,8 @@ function usePortalEmailVerification(props) {
       return;
     setError("");
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email, urlParams, redirectPath };
     await request(variables);
   };
   useEffect(() => {
@@ -59,6 +60,12 @@ const PortalEmailVerification = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Email verification header text
      */
@@ -75,7 +82,7 @@ const PortalEmailVerification = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks, content } = j()
+    const { states, callbacks, content } = k()
       ? usePortalEmailVerificationDemo(this)
       : usePortalEmailVerification(this);
     return (h$1(PortalEmailVerificationView, { states: states, callbacks: callbacks, content: content }));

package/dist/esm/{sqm-portal-footer-view-d9fe0bf8.js → sqm-portal-footer-view-687506c8.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-90da933f.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { i as intl } from './global-9b000c0b.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {
   return (h("svg", { width: width, height: height, viewBox: "0 0 132 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -57,8 +57,7 @@ function PortalFooterView(props) {
       },
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },

package/dist/esm/sqm-portal-footer.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './global-90da933f.js';
-import './use-callback-b38a1523.js';
-import './index.module-90d2c3ad.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './extends-33266e9b.js';
+import './global-9b000c0b.js';
+import './use-callback-52b52f6a.js';
+import './index.module-6d78e252.js';
+import './JSS-fadfaeff.js';
 import { g as getProps } from './utils-454405f5.js';
-import { a as PortalFooterView } from './sqm-portal-footer-view-d9fe0bf8.js';
+import { a as PortalFooterView } from './sqm-portal-footer-view-687506c8.js';
 
 const PortalFooter = class {
   constructor(hostRef) {