@saasquatch/mint-components 1.6.2-3 → 1.7.0-0

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: "Components/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: "Components/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))));
+};

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

@@ -1,129 +1,129 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { isMobile, isValidColor } from "../../utilities";
-const paddingList = [
-  "var(--sl-spacing-xxx-small)",
-  "var(--sl-spacing-xx-small)",
-  "var(--sl-spacing-x-small)",
-  "var(--sl-spacing-small)",
-  "var(--sl-spacing-medium)",
-  "var(--sl-spacing-large)",
-  "var(--sl-spacing-x-large)",
-  "var(--sl-spacing-xx-large)",
-  "var(--sl-spacing-xxx-large)",
-  "var(--sl-spacing-xxxx-large)",
-];
-const parseBackground = (provided_bg) => {
-  if (provided_bg) {
-    if (isValidColor(provided_bg)) {
-      return provided_bg;
-    }
-    else {
-      return `url(${provided_bg})`;
-    }
-  }
-  else {
-    return "";
-  }
-};
-export function HeroView(props) {
-  const { states, content } = props;
-  const getVertivalPadding = (size, half) => {
-    const sizes = {
-      small: 7,
-      medium: 8,
-      large: 9,
-    };
-    var index = sizes[size];
-    if (isMobile(767)) {
-      index = index - 2;
-    }
-    else if (isMobile(1023)) {
-      index = index - 1;
-    }
-    return half ? paddingList[index - 2] : paddingList[index];
-  };
-  const getHorizontalPadding = (size) => {
-    if (size == "small") {
-      return "1%";
-    }
-    else if (size == "medium") {
-      return "3%";
-    }
-    else {
-      return "5%";
-    }
-  };
-  // Dependent on props, not feasiable to move out
-  const style = {
-    TwoColumnContainer: {
-      display: "flex",
-      "@media screen and (max-width: 1023px)": {
-        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
-        justfiyContent: "center",
-      },
-    },
-    ColumnPadding: {
-      paddingTop: states.paddingSize == "none"
-        ? "0px"
-        : getVertivalPadding(states.paddingSize),
-      paddingBottom: states.paddingSize == "none"
-        ? "0px"
-        : getVertivalPadding(states.paddingSize),
-      paddingLeft: states.paddingSize == "none"
-        ? "0px"
-        : getHorizontalPadding(states.paddingSize),
-      paddingRight: states.paddingSize == "none"
-        ? "0px"
-        : getHorizontalPadding(states.paddingSize),
-    },
-    ColumnWrapper: {
-      "&:first-of-type": {
-        background: `no-repeat center/cover ${parseBackground(states.background)}`,
-      },
-      "&:last-of-type": {
-        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
-      },
-      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
-      display: "block",
-    },
-    SingleColumnContainer: {
-      background: `no-repeat center/cover ${parseBackground(states.background)}`,
-      flex: "1 1 0",
-    },
-    Container: {
-      width: "100%",
-      maxWidth: "var(--sqm-max-width)",
-      margin: "0 auto",
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: "100%",
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{    
-    height: 100%;
-    display: contents;
-  }
-  sqm-hero{    
-    height: 100%;
-    display: contents;
-  }
-  img{
-      max-width: 100%;
-      height: auto;
-  }
-  
-`;
-  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { isMobile, isValidColor } from "../../utilities";
+const paddingList = [
+  "var(--sl-spacing-xxx-small)",
+  "var(--sl-spacing-xx-small)",
+  "var(--sl-spacing-x-small)",
+  "var(--sl-spacing-small)",
+  "var(--sl-spacing-medium)",
+  "var(--sl-spacing-large)",
+  "var(--sl-spacing-x-large)",
+  "var(--sl-spacing-xx-large)",
+  "var(--sl-spacing-xxx-large)",
+  "var(--sl-spacing-xxxx-large)",
+];
+const parseBackground = (provided_bg) => {
+  if (provided_bg) {
+    if (isValidColor(provided_bg)) {
+      return provided_bg;
+    }
+    else {
+      return `url(${provided_bg})`;
+    }
+  }
+  else {
+    return "";
+  }
+};
+export function HeroView(props) {
+  const { states, content } = props;
+  const getVertivalPadding = (size, half) => {
+    const sizes = {
+      small: 7,
+      medium: 8,
+      large: 9,
+    };
+    var index = sizes[size];
+    if (isMobile(767)) {
+      index = index - 2;
+    }
+    else if (isMobile(1023)) {
+      index = index - 1;
+    }
+    return half ? paddingList[index - 2] : paddingList[index];
+  };
+  const getHorizontalPadding = (size) => {
+    if (size == "small") {
+      return "1%";
+    }
+    else if (size == "medium") {
+      return "3%";
+    }
+    else {
+      return "5%";
+    }
+  };
+  // Dependent on props, not feasiable to move out
+  const style = {
+    TwoColumnContainer: {
+      display: "flex",
+      "@media screen and (max-width: 1023px)": {
+        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
+        justfiyContent: "center",
+      },
+    },
+    ColumnPadding: {
+      paddingTop: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingBottom: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingLeft: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+      paddingRight: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+    },
+    ColumnWrapper: {
+      "&:first-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      },
+      "&:last-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
+      },
+      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      display: "block",
+    },
+    SingleColumnContainer: {
+      background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      flex: "1 1 0",
+    },
+    Container: {
+      width: "100%",
+      maxWidth: "var(--sqm-max-width)",
+      margin: "0 auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
+      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+}