@saasquatch/mint-components 1.5.1-1 → 1.5.2-0

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -1,82 +1,82 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-/**
- * @uiName Form Message
- */
-export class FormMessage {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    if (this.type === "error") {
-      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
-        h("slot", null)));
-    }
-    else if (this.type === "info") {
-      return (h("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
-        h("slot", null)));
-    }
-    else {
-      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
-        h("slot", null)));
-    }
-  }
-  static get is() { return "sqm-form-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["sqm-form-message.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sqm-form-message.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Type of alert",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Icon to use in alert",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+/**
+ * @uiName Form Message
+ */
+export class FormMessage {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    if (this.type === "error") {
+      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
+        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
+        h("slot", null)));
+    }
+    else if (this.type === "info") {
+      return (h("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
+        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
+        h("slot", null)));
+    }
+    else {
+      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
+        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
+        h("slot", null)));
+    }
+  }
+  static get is() { return "sqm-form-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["sqm-form-message.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sqm-form-message.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Type of alert",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon to use in alert",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-graphql-client-provider/sqm-graphql-client-provider.js

@@ -1,50 +1,50 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Host, Prop, State, h } from "@stencil/core";
-import { useGraphQLClientProvider } from "./useGraphQLProvider";
-/**
- * @uiName GraphQL Client Provider
- */
-export class GraphQLClientProvider {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    false && isDemo()
-      ? useGraphQLClientProviderDemo(this)
-      : useGraphQLClientProvider(this);
-    return (h(Host, { style: { display: "contents" } },
-      h("slot", null)));
-  }
-  static get is() { return "sqm-graphql-client-provider"; }
-  static get properties() { return {
-    "domain": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Domain",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "domain",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useGraphQLClientProviderDemo({ domain }) {
-  return domain;
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Host, Prop, State, h } from "@stencil/core";
+import { useGraphQLClientProvider } from "./useGraphQLProvider";
+/**
+ * @uiName GraphQL Client Provider
+ */
+export class GraphQLClientProvider {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    false && isDemo()
+      ? useGraphQLClientProviderDemo(this)
+      : useGraphQLClientProvider(this);
+    return (h(Host, { style: { display: "contents" } },
+      h("slot", null)));
+  }
+  static get is() { return "sqm-graphql-client-provider"; }
+  static get properties() { return {
+    "domain": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Domain",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "domain",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useGraphQLClientProviderDemo({ domain }) {
+  return domain;
+}

package/dist/collection/components/sqm-graphql-client-provider/useGraphQLProvider.js

@@ -1,14 +1,14 @@
-import { GRAPHQL_CONTEXT, memoizedGraphQLClient, useTenantAlias, useToken, } from "@saasquatch/component-boilerplate";
-import { useDomContextState } from "@saasquatch/stencil-hooks";
-import { useEffect } from "@saasquatch/universal-hooks";
-export async function useGraphQLClientProvider({ domain }) {
-  const token = useToken();
-  const appDomain = domain;
-  const tenantAlias = useTenantAlias();
-  // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = memoizedGraphQLClient(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = useDomContextState(GRAPHQL_CONTEXT, managedIdentityClient);
-  useEffect(() => {
-    setGraphQLClient(managedIdentityClient);
-  }, [managedIdentityClient]);
-}
+import { GRAPHQL_CONTEXT, memoizedGraphQLClient, useTenantAlias, useToken, } from "@saasquatch/component-boilerplate";
+import { useDomContextState } from "@saasquatch/stencil-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
+export async function useGraphQLClientProvider({ domain }) {
+  const token = useToken();
+  const appDomain = domain;
+  const tenantAlias = useTenantAlias();
+  // Memoization is shared. One client per domain, tenant and token (or null)
+  const managedIdentityClient = memoizedGraphQLClient(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = useDomContextState(GRAPHQL_CONTEXT, managedIdentityClient);
+  useEffect(() => {
+    setGraphQLClient(managedIdentityClient);
+  }, [managedIdentityClient]);
+}

package/dist/collection/components/sqm-hero/Hero.stories.js

@@ -1,168 +1,168 @@
-import { h } from "@stencil/core";
-import { HeroView } from "./sqm-hero-view";
-import scenario from "../sqm-hero/sqm-hero.feature";
-export default {
-  title: "Hero Layout",
-  parameters: {
-    scenario,
-  },
-};
-export const LoginOneColumn = () => {
-  const props = {
-    states: {
-      columns: 1,
-      wrapDirection: "wrap",
-      paddingSize: "large",
-    },
-    content: {
-      primaryColumn: [
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("sqm-portal-login", null),
-      ],
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const LoginOneColumnWithColor = () => {
-  const props = {
-    states: {
-      columns: 1,
-      wrapDirection: "wrap",
-      paddingSize: "large",
-      background: "LightSlateGrey",
-    },
-    content: {
-      primaryColumn: h("sqm-portal-login", null),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const LoginOneColumnWithImage = () => {
-  const props = {
-    states: {
-      columns: 1,
-      wrapDirection: "wrap",
-      paddingSize: "large",
-      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
-    },
-    content: { primaryColumn: h("sqm-portal-login", null) },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const TwoColumnLoginLargePadding = () => {
-  const props = {
-    states: {
-      columns: 2,
-      wrapDirection: "wrap",
-      paddingSize: "large",
-      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
-      secondaryBackground: "LightSlateGrey",
-    },
-    content: {
-      primaryColumn: h("sqm-portal-login", null),
-      secondaryColumn: (h("div", null,
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const TwoColumnLoginMediumPadding = () => {
-  const props = {
-    states: {
-      columns: 2,
-      wrapDirection: "wrap",
-      paddingSize: "medium",
-      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
-      secondaryBackground: "LightSlateGrey",
-    },
-    content: {
-      primaryColumn: h("sqm-portal-login", null),
-      secondaryColumn: (h("div", null,
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const TwoColumnLoginSmallPadding = () => {
-  const props = {
-    states: {
-      columns: 2,
-      wrapDirection: "wrap",
-      paddingSize: "small",
-      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
-      secondaryBackground: "LightSlateGrey",
-    },
-    content: {
-      primaryColumn: h("sqm-portal-login", null),
-      secondaryColumn: (h("div", null,
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const TwoColumnLoginNoPadding = () => {
-  const props = {
-    states: {
-      columns: 2,
-      wrapDirection: "wrap",
-      paddingSize: "none",
-      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
-      secondaryBackground: "LightSlateGrey",
-    },
-    content: {
-      primaryColumn: h("sqm-portal-login", null),
-      secondaryColumn: (h("div", null,
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const TwoColumnLoginReverseWrap = () => {
-  const props = {
-    states: {
-      columns: 2,
-      wrapDirection: "wrap-reverse",
-      background: "LightSlateGrey",
-      paddingSize: "large",
-      secondaryBackground: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
-    },
-    content: {
-      primaryColumn: h("sqm-portal-change-password", null),
-      secondaryColumn: (h("div", null,
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
-export const TwoColumnLoginWithImgElement = () => {
-  const props = {
-    states: {
-      columns: 2,
-      wrapDirection: "wrap",
-      paddingSize: "large",
-    },
-    content: {
-      primaryColumn: (h("div", null,
-        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
-        h("sqm-portal-login", null))),
-      secondaryColumn: (h("div", null,
-        h("img", { src: "https://images.unsplash.com/photo-1487528278747-ba99ed528ebc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" }),
-        h("p", null, "Pellentesque mauris urna, lacinia non turpis sed, pulvinar congue ligula. Sed mattis condimentum eros nec vulputate. Cras consectetur eget libero at viverra. Aliquam suscipit feugiat ante sit amet sagittis. Fusce pulvinar interdum odio ut dapibus. Nulla aliquet ultricies augue nec dignissim. Morbi vulputate hendrerit sem."))),
-    },
-  };
-  return (h("div", { style: { height: "800px" } },
-    h(HeroView, Object.assign({}, props))));
-};
+import { h } from "@stencil/core";
+import { HeroView } from "./sqm-hero-view";
+import scenario from "../sqm-hero/sqm-hero.feature";
+export default {
+  title: "Hero Layout",
+  parameters: {
+    scenario,
+  },
+};
+export const LoginOneColumn = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+      paddingSize: "large",
+    },
+    content: {
+      primaryColumn: [
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("sqm-portal-login", null),
+      ],
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const LoginOneColumnWithColor = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+      paddingSize: "large",
+      background: "LightSlateGrey",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-login", null),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const LoginOneColumnWithImage = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+      paddingSize: "large",
+      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+    },
+    content: { primaryColumn: h("sqm-portal-login", null) },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const TwoColumnLoginLargePadding = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+      paddingSize: "large",
+      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+      secondaryBackground: "LightSlateGrey",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-login", null),
+      secondaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const TwoColumnLoginMediumPadding = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+      paddingSize: "medium",
+      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+      secondaryBackground: "LightSlateGrey",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-login", null),
+      secondaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const TwoColumnLoginSmallPadding = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+      paddingSize: "small",
+      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+      secondaryBackground: "LightSlateGrey",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-login", null),
+      secondaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const TwoColumnLoginNoPadding = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+      paddingSize: "none",
+      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+      secondaryBackground: "LightSlateGrey",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-login", null),
+      secondaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const TwoColumnLoginReverseWrap = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap-reverse",
+      background: "LightSlateGrey",
+      paddingSize: "large",
+      secondaryBackground: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-change-password", null),
+      secondaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+export const TwoColumnLoginWithImgElement = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+      paddingSize: "large",
+    },
+    content: {
+      primaryColumn: (h("div", null,
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("sqm-portal-login", null))),
+      secondaryColumn: (h("div", null,
+        h("img", { src: "https://images.unsplash.com/photo-1487528278747-ba99ed528ebc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" }),
+        h("p", null, "Pellentesque mauris urna, lacinia non turpis sed, pulvinar congue ligula. Sed mattis condimentum eros nec vulputate. Cras consectetur eget libero at viverra. Aliquam suscipit feugiat ante sit amet sagittis. Fusce pulvinar interdum odio ut dapibus. Nulla aliquet ultricies augue nec dignissim. Morbi vulputate hendrerit sem."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};