@saasquatch/mint-components 1.5.6-8 → 1.6.0-2

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

@@ -1,83 +1,80 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import { useChildElements } from "../../tables/useChildElements";
-/**
- * @uiName Program Timeline
- * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
- * @exampleGroup Common Components
- * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
-*/
-export class Timeline {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Icon
-     * @uiType string
-     * @uiEnum ["gift", "circle"]
-     * @uiEnumNames ["Gift", "Circle"]
-     */
-    this.icon = "gift";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const rewards = useChildElements();
-    rewards.forEach((reward) => {
-      try {
-        reward.setIcon(this.icon);
-      }
-      catch {
-        // incase child is not sqm-timeline-entry
-      }
-    });
-    const vanillaStyle = `
-		:host{
-			display: block;   
-		}
-
-		::slotted(*:not(:only-child):not(:last-child)) {
-			margin-bottom: var(--sl-spacing-xx-large);
-		}
-	`;
-    return (h("div", null,
-      h("style", { type: "text/css" }, vanillaStyle),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-timeline"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"gift\" | \"circle\"",
-        "resolved": "\"circle\" | \"gift\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Icon",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"gift\", \"circle\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Gift\", \"Circle\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "\"gift\""
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { useChildElements } from "../../tables/useChildElements";
+/**
+ * @uiName Timeline
+ */
+export class Timeline {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Icon
+     * @uiType string
+     * @uiEnum ["gift", "circle"]
+     * @uiEnumNames ["Gift", "Circle"]
+     */
+    this.icon = "gift";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const rewards = useChildElements();
+    rewards.forEach((reward) => {
+      try {
+        reward.setIcon(this.icon);
+      }
+      catch {
+        // incase child is not sqm-timeline-entry
+      }
+    });
+    const vanillaStyle = `
+		:host{
+			display: block;   
+		}
+
+		::slotted(*:not(:only-child):not(:last-child)) {
+			margin-bottom: var(--sl-spacing-xx-large);
+		}
+	`;
+    return (h("div", null,
+      h("style", { type: "text/css" }, vanillaStyle),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-timeline"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"gift\" | \"circle\"",
+        "resolved": "\"circle\" | \"gift\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"gift\", \"circle\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Gift\", \"Circle\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"gift\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-titled-section/TitledSection.stories.js

@@ -1,224 +1,224 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-titled-section.feature";
-export default {
-  title: "Components/Titled Section",
-  parameters: {
-    scenario,
-  },
-};
-export const AlignLeft = () => {
-  return (h("sqm-titled-section", { "text-align": "left" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const AlignCenter = () => {
-  return (h("sqm-titled-section", { "text-align": "center" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const AlignRight = () => {
-  return (h("sqm-titled-section", { "text-align": "right" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const Padding = () => {
-  return (h("div", null,
-    h("h3", null, "None"),
-    h("sqm-titled-section", { padding: "none" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-small"),
-    h("sqm-titled-section", { padding: "xxx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-small"),
-    h("sqm-titled-section", { padding: "xx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-small"),
-    h("sqm-titled-section", { padding: "x-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "small"),
-    h("sqm-titled-section", { padding: "small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "medium"),
-    h("sqm-titled-section", { padding: "medium" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "large"),
-    h("sqm-titled-section", { padding: "large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-large"),
-    h("sqm-titled-section", { padding: "x-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-large"),
-    h("sqm-titled-section", { padding: "xx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-large"),
-    h("sqm-titled-section", { padding: "xxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxxx-large"),
-    h("sqm-titled-section", { padding: "xxxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
-};
-export const LabelMargin = () => {
-  return (h("div", null,
-    h("h3", null, "None"),
-    h("sqm-titled-section", { "label-margin": "none" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-small"),
-    h("sqm-titled-section", { "label-margin": "xxx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-small"),
-    h("sqm-titled-section", { "label-margin": "xx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-small"),
-    h("sqm-titled-section", { "label-margin": "x-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "small"),
-    h("sqm-titled-section", { "label-margin": "small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "medium"),
-    h("sqm-titled-section", { "label-margin": "medium" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "large"),
-    h("sqm-titled-section", { "label-margin": "large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-large"),
-    h("sqm-titled-section", { "label-margin": "x-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-large"),
-    h("sqm-titled-section", { "label-margin": "xx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-large"),
-    h("sqm-titled-section", { "label-margin": "xxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxxx-large"),
-    h("sqm-titled-section", { "label-margin": "xxxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-titled-section.feature";
+export default {
+  title: "Components/Titled Section",
+  parameters: {
+    scenario,
+  },
+};
+export const AlignLeft = () => {
+  return (h("sqm-titled-section", { "text-align": "left" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const AlignCenter = () => {
+  return (h("sqm-titled-section", { "text-align": "center" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const AlignRight = () => {
+  return (h("sqm-titled-section", { "text-align": "right" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const Padding = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { padding: "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { padding: "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { padding: "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { padding: "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { padding: "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { padding: "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { padding: "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { padding: "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { padding: "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { padding: "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { padding: "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const LabelMargin = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { "label-margin": "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { "label-margin": "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { "label-margin": "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { "label-margin": "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { "label-margin": "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { "label-margin": "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { "label-margin": "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { "label-margin": "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { "label-margin": "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};