@saasquatch/mint-components 1.4.2 → 1.5.0-100

package/dist/collection/components/sqm-card-feed/CardFeed.stories.js

@@ -0,0 +1,232 @@
+import { h } from "@stencil/core";
+import { CardFeedView } from "./sqm-card-feed-view";
+import { TaskCardView } from "../sqm-task-card/sqm-task-card-view";
+import scenario from "./sqm-card-feed.feature";
+export default {
+  title: "Components/Card Feed",
+  parameters: {
+    scenario,
+  },
+};
+const oneAction = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    rewardAmount: "20",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: false,
+    steps: false,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    rewardDuration: null,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 1,
+    locale: "en",
+  },
+  states: {
+    progress: 0,
+    loading: false,
+    loadingEvent: false,
+  },
+};
+const coupleActions = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    rewardAmount: "40",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Comment on 5 articles",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: true,
+    steps: true,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 5,
+    locale: "en",
+  },
+  states: {
+    progress: 1,
+    loading: false,
+    loadingEvent: false,
+  },
+};
+const manyActions = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    rewardAmount: "150",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Spend $500 at our Store",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    showProgressBar: true,
+    steps: false,
+    progressBarUnit: "$",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 500,
+    locale: "en",
+  },
+  states: { progress: 100, loading: false, loadingEvent: false },
+};
+export const TaskCardGrid = () => {
+  return (h(CardFeedView, { width: 347, gap: 24 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridHighGap = () => {
+  return (h(CardFeedView, { width: 400, gap: 150 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridLowGap = () => {
+  return (h(CardFeedView, { width: 400, gap: 12 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridHighWidth = () => {
+  return (h(CardFeedView, { width: 1000, gap: 24 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridLowWidth = () => {
+  return (h(CardFeedView, { width: 250, gap: 24 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const CardFeedGeneric = () => {
+  return (h(CardFeedView, { width: 300, gap: 24 },
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER")));
+};

package/dist/collection/components/sqm-card-feed/sqm-card-feed-view.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container }, children)));
+}

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -0,0 +1,79 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { CardFeedView } from "./sqm-card-feed-view";
+/**
+ * @uiName Card Feed
+ */
+export class CardFeed {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(CardFeedView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-card-feed"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "347"
+    },
+    "gap": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Gap",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/{stories → components/sqm-divided-layout}/DividedLayout.stories.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "../sqm-navigation-sidebar/sqm-navigation-sidebar-view";
+import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 export default {
-  title: "Divided Layout",
+  title: "Components/Divided Layout",
 };
 const barProps = {
   data: {

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-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";
 export function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
@@ -43,8 +42,7 @@ export function DividedLayoutView(props, children) {
     ${hostStyle}
   }
   `;
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.LayoutContainer },
     h("style", { type: "text/css" },

package/dist/collection/{stories → components/sqm-edit-profile}/EditProfileForm.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import EditProfileView from "../components/sqm-edit-profile/sqm-edit-profile-view";
+import EditProfileView from "./sqm-edit-profile-view";
 export default {
-  title: "Edit Profile Form",
+  title: "Components/Edit Profile Form",
 };
 const defaultProps = {
   states: {

package/dist/collection/{stories → components/sqm-edit-profile}/UseEditProfile.stories.js

@@ -1,7 +1,7 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+export function EmptyStateView(props) {
+  const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
+  return (h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+    h("sqm-image", { "image-url": emptyStateImage }),
+    h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, emptyStateHeader)),
+      h("sqm-text", { slot: "content" }, emptyStateText))));
+}

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

@@ -0,0 +1,78 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import { EmptyStateView } from "./sqm-empty-view";
+/**
+ * @uiName Empty State Content
+ */
+export class HeroImage {
+  render() {
+    return (h(Host, { slot: "empty" },
+      h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText })));
+  }
+  static get is() { return "sqm-empty"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "emptyStateImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "ImageUpload",
+            "name": "uiWidget"
+          }, {
+            "text": "Empty State Image Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image",
+      "reflect": false
+    },
+    "emptyStateHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header",
+      "reflect": false
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/{stories → components/sqm-form-message}/FormMessage.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Form Message",
+  title: "Components/Form Message",
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { HeroView } from "../components/sqm-hero/sqm-hero-view";
-import scenario from "../components/sqm-hero/sqm-hero.feature";
+import { HeroView } from "./sqm-hero-view";
+import scenario from "../sqm-hero/sqm-hero.feature";
 export default {
   title: "Hero Layout",
   parameters: {

package/dist/collection/components/sqm-hero/sqm-hero-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 { isMobile, isValidColor } from "../../utilities";
 const paddingList = [
   "var(--sl-spacing-xxx-small)",
@@ -101,8 +100,7 @@ export function HeroView(props) {
       minHeight: "100%",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
   :host{    

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

@@ -0,0 +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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828752/tenant_test_a7iws76wkk4az/aag0ns2mstusdizs0g2x.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-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.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-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.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-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.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-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.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-staging/image/upload/v1643828952/tenant_test_a7iws76wkk4az/binv6fy0l94xbljk4qty.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": "" }));
+};
+export const ColumnsCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://res.cloudinary.com/saasquatch-staging/image/upload/v1643828833/tenant_test_a7iws76wkk4az/ypmzuxldhnbvouujeuks.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" }));
+};