@saasquatch/mint-components 1.4.2 → 1.5.0-100

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-navigation-sidebar-item/sqm-navigation-sidebar-item.js

@@ -57,7 +57,7 @@ export class NavigationSidebarItem {
             "text": "Icon",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false

package/dist/collection/{stories → components/sqm-password-field}/PasswordField.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Portal Password Field",
+  title: "Components/Portal Password Field",
 };
 export const Start = () => {
   return (h("sqm-password-field", { demoData: {

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/{stories → components/sqm-portal-change-password}/ChangePassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
-import scenario from "../components/sqm-portal-change-password/sqm-portal-change-password.feature";
+import { PortalChangePasswordView } from "./sqm-portal-change-password-view";
+import scenario from "./sqm-portal-change-password.feature";
 export default {
-  title: "Change Password",
+  title: "Components/Change Password",
   parameters: {
     scenario,
   },

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),

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -0,0 +1,47 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-portal-container.feature";
+export default {
+  title: "Components/Portal Container",
+  parameters: {
+    scenario,
+  },
+};
+export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large" },
+    h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
+    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
+export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -1,23 +1,26 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
     Container: {
-      display: "grid",
+      display: props.display || "grid",
+      flexWrap: "wrap",
       "grid-template-columns": props.direction === "row"
         ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
-        : "",
+        : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth ? props.maxWidth : "",
+      background: "var(--sqm-portal-background)",
+      margin: props.center && "auto",
     },
   };
   const vanillaStyle = `
   :host{
     width: 100%;
+    display: block;
   }`;
-  jss.setup(preset());
-  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/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -20,6 +20,16 @@ export class PortalContainer {
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
     this.gap = "xxx-large";
+    /**
+     * @uiName Display
+     * @uiType string
+     * @uiEnum ["grid", "flex"]
+     */
+    this.display = "grid";
+    /**
+     * @uiName Maximum width
+     */
+    this.maxWidth = "100%";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -139,6 +149,74 @@ export class PortalContainer {
       },
       "attribute": "min-width",
       "reflect": false
+    },
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"grid\" | \"flex\"",
+        "resolved": "\"flex\" | \"grid\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Display",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"grid\", \"flex\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "\"grid\""
+    },
+    "maxWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Maximum width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    },
+    "center": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Center content",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "center",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/{stories → components/sqm-portal-email-verification}/PortalEmailVerification.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalEmailVerificationView, } from "../components/sqm-portal-email-verification/sqm-portal-email-verification-view";
-import scenario from "../components/sqm-portal-email-verification/sqm-portal-email-verification.feature";
+import { PortalEmailVerificationView, } from "./sqm-portal-email-verification-view";
+import scenario from "./sqm-portal-email-verification.feature";
 export default {
-  title: "Portal Email Verification",
+  title: "Components/Portal Email Verification",
   parameters: {
     scenario,
   },

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
+import { intl } from "../../global/global";
 import { AuthColumn, AuthWrapper } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-import { intl } from "../../global/global";
 const style = {
   Wrapper: AuthWrapper,
   Column: { ...AuthColumn },
@@ -16,11 +15,10 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export 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/collection/{stories → components/sqm-portal-footer}/PortalFooter.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { PortalFooterView } from "../components/sqm-portal-footer/sqm-portal-footer-view";
-import scenario from "../components/sqm-portal-footer/sqm-portal-footer.feature";
+import { PortalFooterView } from "./sqm-portal-footer-view";
+import scenario from "../sqm-portal-footer/sqm-portal-footer.feature";
 export default {
   title: "Portal Footer",
   parameters: {

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-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 { intl } from "../../global/global";
 import { PoweredByImg } from "./PoweredByImg";
 const vanillaStyle = `
@@ -47,8 +46,7 @@ export function PortalFooterView(props) {
       },
     },
   };
-  jss.setup(preset());
-  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/collection/{stories → components/sqm-portal-forgot-password}/PortalForgotPassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalForgotPasswordView, } from "../components/sqm-portal-forgot-password/sqm-portal-forgot-password-view";
-import scenario from "../components/sqm-portal-forgot-password/sqm-portal-forgot-password.feature";
+import { PortalForgotPasswordView, } from "./sqm-portal-forgot-password-view";
+import scenario from "./sqm-portal-forgot-password.feature";
 export default {
-  title: "Portal Forgot Password",
+  title: "Components/Portal Forgot Password",
   parameters: {
     scenario,
   },

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

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -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 PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;

package/dist/collection/{stories → components/sqm-portal-frame}/PortalFrame.stories.js

@@ -1,6 +1,6 @@
 import { navigation, useCurrentPage } from "@saasquatch/component-boilerplate";
 import { h } from "@stencil/core";
-import { PortalFrameView } from "../components/sqm-portal-frame/sqm-portal-frame-view";
+import { PortalFrameView } from "./sqm-portal-frame-view";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;
@@ -32,7 +32,7 @@ function setupLoggedOut() {
   };
 }
 export default {
-  title: "Portal Frame",
+  title: "Components/Portal Frame",
 };
 const defaultProps = {
   data: {

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame-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 { HostBlock } from "../../global/mixins";
 const style = {
   HostBlock: HostBlock,
@@ -40,8 +39,7 @@ const style = {
     },
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalFrameView(props, children) {
   const { data } = props;

package/dist/collection/{stories → components/sqm-portal-login}/PortalLogin.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { PortalLoginView, } from "../components/sqm-portal-login/sqm-portal-login-view";
+import { PortalLoginView, } from "./sqm-portal-login-view";
 export default {
-  title: "Portal Login",
+  title: "Components/Portal Login",
 };
 const defaultProps = {
   states: {

package/dist/collection/components/sqm-portal-login/sqm-portal-login-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -24,8 +23,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalLoginView(props) {
   const { states, callbacks, content } = props;

package/dist/collection/{stories → components/sqm-portal-profile}/PortalProfile.stories.js

@@ -1,14 +1,8 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { PortalProfileView, } from "../components/sqm-portal-profile/sqm-portal-profile-view";
+import { PortalProfileView } from "./sqm-portal-profile-view";
 export default {
-  title: "Portal Profile",
+  title: "Components/Portal Profile",
 };
-// const style = {};
-jss.setup(preset());
-// const sheet = jss.createStyleSheet(style);
-// const styleString = sheet.toString();
 const defaultProps = {
   states: {
     success: false,

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-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 { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 import { intl } from "../../global/global";
@@ -26,8 +25,7 @@ export function PortalProfileView(props) {
       },
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
     type: "region",

package/dist/collection/{stories → components/sqm-portal-register}/PortalRegister.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { PortalRegisterView, } from "../components/sqm-portal-register/sqm-portal-register-view";
+import { PortalRegisterView, } from "./sqm-portal-register-view";
 export default {
-  title: "Portal Register",
+  title: "Components/Portal Register",
 };
 const defaultProps = {
   states: {

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
@@ -29,8 +28,7 @@ sqm-portal-register {
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalRegisterView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -340,7 +340,7 @@ export class PortalRegister {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegisterViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/{stories → components/sqm-portal-reset-password}/PortalResetPassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalResetPasswordView, } from "../components/sqm-portal-reset-password/sqm-portal-reset-password-view";
-import scenario from "../components/sqm-portal-reset-password/sqm-portal-reset-password.feature";
+import { PortalResetPasswordView, } from "./sqm-portal-reset-password-view";
+import scenario from "./sqm-portal-reset-password.feature";
 export default {
-  title: "Portal Reset Password",
+  title: "Components/Portal Reset Password",
   parameters: {
     scenario,
   },

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

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -34,8 +33,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) {
   const { states, callbacks } = props;

package/dist/collection/{stories → components/sqm-portal-verify-email}/PortalVerifyEmail.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalVerifyEmailView, } from "../components/sqm-portal-verify-email/sqm-portal-verify-email-view";
-import scenario from "../components/sqm-portal-verify-email/sqm-portal-verify-email.feature";
+import { PortalVerifyEmailView, } from "./sqm-portal-verify-email-view";
+import scenario from "./sqm-portal-verify-email.feature";
 export default {
-  title: "Portal Verify Email",
+  title: "Components/Portal Verify Email",
   parameters: {
     scenario,
   },

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { AuthColumn, AuthWrapper } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -18,8 +17,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;