@saasquatch/mint-components 1.6.0 → 1.6.1-10

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

@@ -1,467 +1,485 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { HeroImageView } from "./sqm-hero-image-view";
-/**
- * @uiName Hero Image
- */
-export class HeroImage {
-  constructor() {
-    /**
-     * @uiName Overlay Opacity
-     */
-    this.overlayOpacity = "0.75";
-    /**
-     * @uiName Image Layout
-     * @uiType string
-     * @uiEnum ["overlay", "columns"]
-     * @uiEnumNames ["Overlay", "Two-column"]
-     */
-    this.layout = "overlay";
-    /**
-     * @uiName Image Percentage
-     * @uiType number
-     */
-    this.imagePercentage = 50;
-    /**
-     * @uiName Image Position
-     * @uiType string
-     * @uiEnum ["left", "center", "right"]
-     * @uiEnumNames ["Left", "Center", "Right"]
-     */
-    this.imagePos = "center";
-    /**
-     * @uiName Image Mobile Position
-     * @uiType string
-     * @uiEnum ["top", "bottom"]
-     * @uiEnumNames ["Top", "Bottom"]
-     */
-    this.imageMobilePos = "top";
-    /**
-     * @uiName CTA Button Link Open in New Tab
-     */
-    this.buttonNewTab = false;
-    /**
-     * @uiName Text Padding
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.paddingText = "xxxx-large";
-    /**
-     * @uiName Image Padding
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.paddingImage = "none";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h(HeroImageView, Object.assign({}, getProps(this)),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-hero-image"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "imageUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "ImageUpload",
-            "name": "uiWidget"
-          }, {
-            "text": "Image Link",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "image-url",
-      "reflect": false
-    },
-    "overlayColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Overlay Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "overlay-color",
-      "reflect": false
-    },
-    "overlayOpacity": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Overlay Opacity",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "overlay-opacity",
-      "reflect": false,
-      "defaultValue": "\"0.75\""
-    },
-    "textColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Text Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Background Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"overlay\" | \"columns\"",
-        "resolved": "\"columns\" | \"overlay\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Image Layout",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"overlay\", \"columns\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Overlay\", \"Two-column\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "layout",
-      "reflect": false,
-      "defaultValue": "\"overlay\""
-    },
-    "imagePercentage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Image Percentage",
-            "name": "uiName"
-          }, {
-            "text": "number",
-            "name": "uiType"
-          }],
-        "text": ""
-      },
-      "attribute": "image-percentage",
-      "reflect": false,
-      "defaultValue": "50"
-    },
-    "imagePos": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"center\" | \"right\"",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Image Position",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"left\", \"center\", \"right\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Left\", \"Center\", \"Right\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "image-pos",
-      "reflect": false,
-      "defaultValue": "\"center\""
-    },
-    "imageMobilePos": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"top\" | \"bottom\"",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Image Mobile Position",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"top\", \"bottom\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Top\", \"Bottom\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "image-mobile-pos",
-      "reflect": false,
-      "defaultValue": "\"top\""
-    },
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Title Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "header",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Description Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "CTA Button Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false
-    },
-    "buttonLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "CTA Button Link",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "button-link",
-      "reflect": false
-    },
-    "buttonNewTab": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "CTA Button Link Open in New Tab",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "button-new-tab",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "paddingText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Spacing",
-        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
-        "references": {
-          "Spacing": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Text Padding",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "padding-text",
-      "reflect": false,
-      "defaultValue": "\"xxxx-large\""
-    },
-    "paddingImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Spacing",
-        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
-        "references": {
-          "Spacing": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Image Padding",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "padding-image",
-      "reflect": false,
-      "defaultValue": "\"none\""
-    }
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { HeroImageView } from "./sqm-hero-image-view";
+/**
+ * @uiName Hero Image
+ * @exampleGroup Common Components
+ * @example Two Column Layout - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
+ * @example Overlay - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ */
+export class HeroImage {
+  constructor() {
+    /**
+     * @uiName Overlay Opacity
+     */
+    this.overlayOpacity = "0.75";
+    /**
+     * @uiName Image Layout
+     * @uiType string
+     * @uiEnum ["overlay", "columns"]
+     * @uiEnumNames ["Overlay", "Two-column"]
+     */
+    this.layout = "overlay";
+    /**
+     * @uiName Image Percentage
+     * @uiType number
+     */
+    this.imagePercentage = 50;
+    /**
+     * @uiName Image Position
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     */
+    this.imagePos = "center";
+    /**
+     * @uiName Image Mobile Position
+     * @uiType string
+     * @uiEnum ["top", "bottom"]
+     * @uiEnumNames ["Top", "Bottom"]
+     */
+    this.imageMobilePos = "top";
+    /**
+     * @uiName Open Link in New Tab
+     */
+    this.buttonNewTab = false;
+    /**
+     * @uiName Text Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingText = "xxxx-large";
+    /**
+     * @uiName Image Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingImage = "none";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(HeroImageView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-hero-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "imageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "ImageUpload",
+            "name": "uiWidget"
+          }, {
+            "text": "url",
+            "name": "format"
+          }, {
+            "text": "Image",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "image-url",
+      "reflect": false
+    },
+    "overlayColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Overlay Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "overlay-color",
+      "reflect": false
+    },
+    "overlayOpacity": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Overlay Opacity",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "overlay-opacity",
+      "reflect": false,
+      "defaultValue": "\"0.75\""
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"overlay\" | \"columns\"",
+        "resolved": "\"columns\" | \"overlay\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Layout",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"overlay\", \"columns\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Overlay\", \"Two-column\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "\"overlay\""
+    },
+    "imagePercentage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Percentage",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "image-percentage",
+      "reflect": false,
+      "defaultValue": "50"
+    },
+    "imagePos": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Position",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"center\", \"right\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Center\", \"Right\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "image-pos",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "imageMobilePos": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"top\" | \"bottom\"",
+        "resolved": "\"bottom\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Mobile Position",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"top\", \"bottom\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Top\", \"Bottom\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "image-mobile-pos",
+      "reflect": false,
+      "defaultValue": "\"top\""
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false
+    },
+    "buttonLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-link",
+      "reflect": false
+    },
+    "buttonNewTab": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Open Link in New Tab",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-new-tab",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "paddingText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text Padding",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "padding-text",
+      "reflect": false,
+      "defaultValue": "\"xxxx-large\""
+    },
+    "paddingImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Image Padding",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "padding-image",
+      "reflect": false,
+      "defaultValue": "\"none\""
+    }
+  }; }
+}