@saasquatch/mint-components 1.5.0-7 → 1.5.0-70

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -1,22 +1,97 @@
 import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Leaderboard: {
+    "& table": {
+      width: "100%",
+      borderCollapse: "collapse",
+    },
+    "& th": {
+      textAlign: "left",
+      padding: "var(--sl-spacing-medium)",
+      paddingTop: "0",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& tr:not(:first-child)": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& td": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+    },
+    "& .ellipses": {
+      textAlign: "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)",
+    },
+    "& .User": {
+      width: "100%",
+    },
+    "& .Score": {
+      width: "auto",
+      whiteSpace: "nowrap",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+	:host{
+		display: block;
+	}
+`;
 export function LeaderboardView(props) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.loading) {
-    return elements.loadingstate;
-  }
-  return (h("div", null,
-    !states.hasLeaders && elements.empty,
-    states.hasLeaders && (h("table", null,
+  if (states.loading)
+    return (h("div", { class: sheet.classes.Leaderboard },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      elements.loadingstate));
+  let userSeenFlag = false;
+  return (h("div", { class: sheet.classes.Leaderboard },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("table", null,
       h("tr", null,
         styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
         h("th", { class: "User" }, styles.usersheading),
-        h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
+        h("th", { class: "Score" }, styles.statsheading)),
+      !states.hasLeaders && (h("tr", null,
+        h("td", { colSpan: 100 }, elements.empty))), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
-        return (h("tr", { class: "SeparateContent" },
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        return (h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
           styles.showRank && h("td", { class: "Rank" }, user.rank),
-          h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
+          h("td", { class: "User" }, user.firstName && user.lastInitial
+            ? user.firstName + " " + user.lastInitial
+            : user.firstName || user.lastInitial
+              ? user.firstName || user.lastInitial
+              : styles.anonymousUser || "Anonymous User"),
           h("td", { class: "Score" }, user.value)));
-      })))));
+      }),
+      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", null,
+        h("td", { colSpan: 100, class: "ellipses" },
+          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", { class: "highlight" },
+        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        h("td", { class: "User" }, ((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+          ? ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.firstName) + " " + ((_f = data.userRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
+          : ((_g = data.userRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.userRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
+            ? ((_j = data.userRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.userRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
+            : styles.anonymousUser || "Anonymous User"),
+        h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
 }

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.css

@@ -8,6 +8,7 @@
 
 table {
   width: 100%;
+  border-collapse: collapse;
 }
 
 th {
@@ -16,15 +17,34 @@ th {
   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-x-small) var(--sl-spacing-small);
+  padding: var(--sl-spacing-medium);
+}
+
+th {
+  padding: var(--sl-spacing-medium);
+  padding-top: 0;
 }
 
 .User {

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -10,6 +10,32 @@ import { useLeaderboard } from "./useLeaderboard";
  */
 export class Leaderboard {
   constructor() {
+    /**
+     * @uiName Rank Heading
+     */
+    this.rankheading = "Rank";
+    /**
+     * Shows the current user's leaderboard information even if they are not in the top 10
+     *
+     * @uiName Show viewing user
+     */
+    this.showUser = true;
+    /**
+     * @uiName Title displayed for users without names
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * @uiName Empty State Image
+     */
+    this.emptyStateImage = "https://i.imgur.com/KPGnPF8.png";
+    /**
+     * @uiName Empty State Header
+     */
+    this.emptyStateHeader = "View your rank in the leaderboard";
+    /**
+     * @uiName Empty State Description
+     */
+    this.emptyStateText = "Be the first to refer a friend and reach the top of the leaderboard";
     this.ignored = true;
     withHooks(this);
     withShadowView(this);
@@ -17,19 +43,23 @@ export class Leaderboard {
   disconnectedCallback() { }
   render() {
     const props = {
-      empty: h("slot", { name: "empty" }),
-      loadingstate: h("slot", { name: "loading" }),
+      empty: (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText })),
+      loadingstate: h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankType: this.rankType,
       leaderboardType: this.leaderboardType,
+      anonymousUser: this.anonymousUser,
       interval: this.interval,
+      showUser: this.showUser,
+      showRank: this.showRank,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
       ? useLeaderboardDemo(demoProps)
       : useLeaderboard(props);
-    return h(LeaderboardView, Object.assign({}, viewprops));
+    return (h(LeaderboardView, Object.assign({}, viewprops),
+      h("slot", null)));
   }
   static get is() { return "sqm-leaderboard"; }
   static get encapsulation() { return "shadow"; }
@@ -89,7 +119,7 @@ export class Leaderboard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Rank Heading",
@@ -98,7 +128,8 @@ export class Leaderboard {
         "text": ""
       },
       "attribute": "rankheading",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"Rank\""
     },
     "showRank": {
       "type": "boolean",
@@ -112,7 +143,7 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show the ranking numbers",
+            "text": "Show leaderboard rank",
             "name": "uiName"
           }],
         "text": ""
@@ -120,6 +151,27 @@ export class Leaderboard {
       "attribute": "show-rank",
       "reflect": false
     },
+    "showUser": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show viewing user",
+            "name": "uiName"
+          }],
+        "text": "Shows the current user's leaderboard information even if they are not in the top 10"
+      },
+      "attribute": "show-user",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "rankType": {
       "type": "string",
       "mutable": false,
@@ -172,6 +224,27 @@ export class Leaderboard {
       "attribute": "leaderboard-type",
       "reflect": false
     },
+    "anonymousUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title displayed for users without names",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "anonymous-user",
+      "reflect": false,
+      "defaultValue": "\"Anonymous User\""
+    },
     "interval": {
       "type": "string",
       "mutable": false,
@@ -198,12 +271,75 @@ export class Leaderboard {
       "attribute": "interval",
       "reflect": false
     },
+    "emptyStateImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image",
+      "reflect": false,
+      "defaultValue": "\"https://i.imgur.com/KPGnPF8.png\""
+    },
+    "emptyStateHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header",
+      "reflect": false,
+      "defaultValue": "\"View your rank in the leaderboard\""
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false,
+      "defaultValue": "\"Be the first to refer a friend and reach the top of the leaderboard\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; }; }; data?: { rankType: string; leaderboard: { value: number; rank: number; firstName: string; lastInitial: string; }[]; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { value: number; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; showUser?: boolean; userRank?: { value: number; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -233,6 +369,23 @@ export class Leaderboard {
     "ignored": {}
   }; }
 }
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
+  return (h("slot", { name: "empty" },
+    h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+      h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }),
+      h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+        h("sqm-text", { slot: "label" },
+          h("h3", null, emptyStateHeader)),
+        h("sqm-text", { slot: "content" }, emptyStateText)))));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h("table", null, [...Array(10)].map(() => {
+      return (h("tr", null,
+        h("td", null,
+          h("sl-skeleton", null))));
+    }))));
+}
 function useLeaderboardDemo(props) {
   return deepmerge({
     states: {
@@ -241,8 +394,11 @@ function useLeaderboardDemo(props) {
       styles: {
         usersheading: props.usersheading
           ? props.usersheading
-          : "TOP REFERRERS",
-        statsheading: props.statsheading ? props.statsheading : "NEW TITANS",
+          : "Top referrers",
+        statsheading: props.statsheading
+          ? props.statsheading
+          : "New customers",
+        rankheading: props.rankheading ? props.rankheading : "Rank",
       },
     },
     data: {
@@ -251,13 +407,13 @@ function useLeaderboardDemo(props) {
         { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
         { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
         { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
+        { value: 55, rank: 4 },
         { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
       ],
     },
     elements: {
-      empty: props.empty ? props.empty : h("div", null, "Empty"),
-      loadingstate: props.loadingstate ? (props.loadingstate) : (h("div", null, "Loading")),
+      empty: (h(EmptySlot, { emptyStateImage: "https://i.imgur.com/KPGnPF8.png", emptyStateHeader: "View your rank in the leaderboard", emptyStateText: "Be the first to refer a friend and reach the top of the leaderboard" })),
+      loadingstate: h(LoadingSlot, null),
     },
   }, props.demoProps || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-leaderboard/useLeaderboard.js

@@ -17,8 +17,24 @@ const GET_LEADERBOARD = gql `
     }
   }
 `;
+const GET_RANK = gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    viewer {
+      ... on User {
+        firstName
+        lastInitial
+        leaderboardRank(type: $type, filter: $filter) {
+          value
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
+`;
 export function useLeaderboard(props) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const programId = useProgramId();
   const user = useUserIdentity();
   const variables = {
@@ -29,6 +45,7 @@ export function useLeaderboard(props) {
     variables.filter["interval"] = props.interval;
   }
   const { data: leaderboardData, loading: loadingLeaderboard } = useQuery(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = useQuery(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
   const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
   const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
@@ -36,15 +53,24 @@ export function useLeaderboard(props) {
   });
   function getFlattenedLeaderboard(leaderboardRows) {
     return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
-      var _a;
+      var _a, _b;
       return ({
         value: user.value,
-        firstName: user.firstName || "Anonymous",
+        firstName: user.firstName,
         lastInitial: user.lastInitial,
         rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
+        rowNumber: (_b = user.rank) === null || _b === void 0 ? void 0 : _b.rowNumber,
       });
     });
   }
+  console.log(rankData);
+  const viewingUser = {
+    value: (_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.value,
+    firstName: (_d = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _d === void 0 ? void 0 : _d.firstName,
+    lastInitial: (_e = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _e === void 0 ? void 0 : _e.lastInitial,
+    rank: (_g = (_f = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _f === void 0 ? void 0 : _f.leaderboardRank) === null || _g === void 0 ? void 0 : _g[props.rankType],
+    rowNumber: (_j = (_h = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _h === void 0 ? void 0 : _h.leaderboardRank) === null || _j === void 0 ? void 0 : _j.rowNumber,
+  };
   return {
     states: {
       loading: loadingLeaderboard,
@@ -54,6 +80,8 @@ export function useLeaderboard(props) {
     data: {
       leaderboard: sortedLeaderboard,
       rankType: props.rankType,
+      userRank: viewingUser,
+      showUser: props.showUser,
     },
     elements: {
       empty: props.empty,

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank.js

@@ -1,10 +1,10 @@
-import { createIntl } from "@formatjs/intl";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { LeaderboardRankView, } from "./sqm-leaderboard-rank-view";
 import { useLeaderboardRank } from "./useLeaderboardRank";
 import deepmerge from "deepmerge";
+import { intl } from "../../global/global";
 /**
  * @uiName Leaderboard Rank
  */
@@ -184,9 +184,6 @@ export class LeaderboardRank {
   }; }
 }
 function useLeaderboardRankDemo(props) {
-  const intl = createIntl({
-    locale: "en",
-  });
   const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: 1,
   }) || "1st";

package/dist/collection/components/sqm-leaderboard-rank/useLeaderboardRank.js

@@ -1,5 +1,5 @@
 import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import gql from "graphql-tag";
+import { gql } from "graphql-request";
 import { intl } from "../../global/global";
 const GET_RANK = gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { ErrorStyles } from "../../global/mixins";
 const style = {
   InputContainer: {
@@ -27,8 +26,7 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function NameFieldsView(props) {
   const { states } = props;

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 const style = {
   ItemsContainer: {
@@ -18,8 +17,7 @@ const vanillaStyle = `
     max-width: 320px;
   }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function NavigationSidebarView(
 // @ts-ignore - Stencil requires props (even if empty)

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
@@ -17,7 +16,9 @@ export 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,8 +28,7 @@ export function NavigationSidebarItemView(props) {
       "flex-shrink": "0",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("a", { href: data.path, onClick: (e) => {
       e.preventDefault();

package/dist/collection/components/sqm-password-field/passwordValidation.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import PasswordValidator from "password-validator";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 const passwordSchema = new PasswordValidator()
   .is()
   .min(8) // Minimum length 8
@@ -55,8 +54,7 @@ const style = {
   },
   ValidationItemInvalid: { ...baseItem },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const getErrorMessage = (errorKeys, password) => {
   if (!errorKeys.length && password)

package/dist/collection/components/sqm-password-field/sqm-password-field-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { ErrorStyles } from "../../global/mixins";
 const style = {
   InputContainer: {
@@ -20,8 +19,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalResetPasswordView(props) {
   var _a, _b;

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { PortalContainerView } from "../sqm-portal-container/sqm-portal-container-view";
 import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
@@ -43,8 +42,7 @@ export function PortalChangePasswordView(props) {
       paddingTop: "var(--sl-spacing-x-large)",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),