@saasquatch/mint-components 1.6.4 → 1.6.5-10

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

@@ -1,180 +1,180 @@
-import { Component, h, Prop } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { HeroView } from "./sqm-hero-view";
-import { getProps } from "../../utils/utils";
-/**
- * @uiName Hero Layout
- * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
- * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
- * @exampleGroup Layout
- */
-export class Hero {
-  constructor() {
-    /**
-     * Number of columns in the layout
-     *
-     * @uiName Columns
-     * @uiEnum [1, 2]
-     * @uiEnumNames ["One", "Two"]
-     */
-    this.columns = 1;
-    /**
-     * Can be an image url, colour or Shoelace variable.
-     *
-     * @uiName Background
-     */
-    this.background = "var(--sl-color-gray-50)";
-    /**
-     * @uiName Padding Size
-     * @uiEnum ["none", "small", "medium","large"]
-     * @uiEnumNames ["None", "Small", "Medium", "Large"]
-     */
-    this.paddingSize = "large";
-    /**
-     * Flexbox wrap direction, accepts wrap or wrap-reverse
-     *
-     * @uiName Wrap Direction
-     * @uiEnum ["wrap", "wrap-reverse"]
-     * @uiEnumNames ["Wrap", "Wrap Reverse"]
-     */
-    this.wrapDirection = "wrap";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      states: { ...getProps(this) },
-      content: {
-        primaryColumn: h("slot", null),
-        secondaryColumn: h("slot", { name: "secondary-column" }),
-      },
-    };
-    return h(HeroView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-hero"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "columns": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "1 | 2",
-        "resolved": "1 | 2",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Columns",
-            "name": "uiName"
-          }, {
-            "text": "[1, 2]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"One\", \"Two\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Number of columns in the layout"
-      },
-      "attribute": "columns",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "background": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Background",
-            "name": "uiName"
-          }],
-        "text": "Can be an image url, colour or Shoelace variable."
-      },
-      "attribute": "background",
-      "reflect": false,
-      "defaultValue": "\"var(--sl-color-gray-50)\""
-    },
-    "paddingSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"none\" | \"small\" | \"medium\" | \"large\"",
-        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Padding Size",
-            "name": "uiName"
-          }, {
-            "text": "[\"none\", \"small\", \"medium\",\"large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"Small\", \"Medium\", \"Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "padding-size",
-      "reflect": false,
-      "defaultValue": "\"large\""
-    },
-    "secondaryBackground": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Secondary Background",
-            "name": "uiName"
-          }],
-        "text": "Secondary background image or color (for use in the right column)"
-      },
-      "attribute": "secondary-background",
-      "reflect": false
-    },
-    "wrapDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"wrap\" | \"wrap-reverse\"",
-        "resolved": "\"wrap\" | \"wrap-reverse\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Wrap Direction",
-            "name": "uiName"
-          }, {
-            "text": "[\"wrap\", \"wrap-reverse\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Wrap\", \"Wrap Reverse\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Flexbox wrap direction, accepts wrap or wrap-reverse"
-      },
-      "attribute": "wrap-direction",
-      "reflect": false,
-      "defaultValue": "\"wrap\""
-    }
-  }; }
-}
+import { Component, h, Prop } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { HeroView } from "./sqm-hero-view";
+import { getProps } from "../../utils/utils";
+/**
+ * @uiName Hero Layout
+ * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
+ * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
+ * @exampleGroup Layout
+ */
+export class Hero {
+  constructor() {
+    /**
+     * Number of columns in the layout
+     *
+     * @uiName Columns
+     * @uiEnum [1, 2]
+     * @uiEnumNames ["One", "Two"]
+     */
+    this.columns = 1;
+    /**
+     * Can be an image url, colour or Shoelace variable.
+     *
+     * @uiName Background
+     */
+    this.background = "var(--sl-color-gray-50)";
+    /**
+     * @uiName Padding Size
+     * @uiEnum ["none", "small", "medium","large"]
+     * @uiEnumNames ["None", "Small", "Medium", "Large"]
+     */
+    this.paddingSize = "large";
+    /**
+     * Flexbox wrap direction, accepts wrap or wrap-reverse
+     *
+     * @uiName Wrap Direction
+     * @uiEnum ["wrap", "wrap-reverse"]
+     * @uiEnumNames ["Wrap", "Wrap Reverse"]
+     */
+    this.wrapDirection = "wrap";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      states: { ...getProps(this) },
+      content: {
+        primaryColumn: h("slot", null),
+        secondaryColumn: h("slot", { name: "secondary-column" }),
+      },
+    };
+    return h(HeroView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columns": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2",
+        "resolved": "1 | 2",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Columns",
+            "name": "uiName"
+          }, {
+            "text": "[1, 2]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"One\", \"Two\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Number of columns in the layout"
+      },
+      "attribute": "columns",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background",
+            "name": "uiName"
+          }],
+        "text": "Can be an image url, colour or Shoelace variable."
+      },
+      "attribute": "background",
+      "reflect": false,
+      "defaultValue": "\"var(--sl-color-gray-50)\""
+    },
+    "paddingSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"none\" | \"small\" | \"medium\" | \"large\"",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Padding Size",
+            "name": "uiName"
+          }, {
+            "text": "[\"none\", \"small\", \"medium\",\"large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"Small\", \"Medium\", \"Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "padding-size",
+      "reflect": false,
+      "defaultValue": "\"large\""
+    },
+    "secondaryBackground": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Secondary Background",
+            "name": "uiName"
+          }],
+        "text": "Secondary background image or color (for use in the right column)"
+      },
+      "attribute": "secondary-background",
+      "reflect": false
+    },
+    "wrapDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"wrap\" | \"wrap-reverse\"",
+        "resolved": "\"wrap\" | \"wrap-reverse\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Wrap Direction",
+            "name": "uiName"
+          }, {
+            "text": "[\"wrap\", \"wrap-reverse\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Wrap\", \"Wrap Reverse\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Flexbox wrap direction, accepts wrap or wrap-reverse"
+      },
+      "attribute": "wrap-direction",
+      "reflect": false,
+      "defaultValue": "\"wrap\""
+    }
+  }; }
+}

package/dist/collection/components/sqm-hero-image/HeroImage.stories.js

@@ -1,56 +1,56 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-hero-image.feature";
-export default {
-  title: "Components/Hero Image",
-  parameters: {
-    scenario,
-  },
-};
-export const OverlayHeader = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayDescription = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayButton = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayPadding = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
-};
-export const OverlayLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayLeft = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayCenter = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayRight = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayCustomColors = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const OverlayCustomOpacity = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const Columns = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const ColumnsPadding = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
-};
-export const ColumnsLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const ColumnsReverse = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
-export const ColumnsCustomPercentage = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "#EFF8FE" }));
-};
-export const ColumnsCustomColors = () => {
-  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-hero-image.feature";
+export default {
+  title: "Components/Hero Image",
+  parameters: {
+    scenario,
+  },
+};
+export const OverlayHeader = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayDescription = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayButton = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
+};
+export const OverlayLong = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayLeft = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayCenter = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayRight = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayCustomOpacity = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const Columns = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const ColumnsPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
+};
+export const ColumnsLong = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const ColumnsReverse = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const ColumnsCustomPercentage = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "#EFF8FE" }));
+};
+export const ColumnsCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
+};