@saasquatch/mint-components 2.0.4-6 → 2.0.4-8

package/dist/mint-components/sqm-hero-image.entry.system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sqm-hero-image.entry.system.js","sources":["src/components/sqm-hero-image/sqm-hero-image-view.tsx","src/components/sqm-hero-image/sqm-hero-image.tsx"],"sourcesContent":["import { h, VNode } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { createStyleSheet } from \"../../styling/JSS\";\n\nexport interface HeroImageViewProps {\n  layout: \"overlay\" | \"columns\";\n  imageUrl: string;\n  overlayColor?: string;\n  overlayOpacity: string;\n  textColor?: string;\n  backgroundColor?: string;\n  imagePercentage?: number;\n  header?: string;\n  description?: string;\n  buttonText?: string;\n  buttonLink?: string;\n  buttonNewTab?: boolean;\n  paddingText?: Spacing;\n  paddingImage?: Spacing;\n  imagePos: \"left\" | \"center\" | \"right\";\n  imageMobilePos: \"top\" | \"bottom\";\n  buttonType?: \"primary\" | \"secondary\";\n}\n\nexport function HeroImageView(props: HeroImageViewProps, children: VNode) {\n  const overlay = Boolean(\n    (props.header || props.description || props.buttonText) &&\n      props.layout === \"overlay\"\n  );\n\n  // Dependent on props, not feasiable to move out\n  const style = {\n    Container: {\n      position: \"relative\",\n      \"&:before\": {\n        content: overlay ? '\"\"' : \"\",\n        width: \"100%\",\n        height: \"100%\",\n        position: \"absolute\",\n        background: props.overlayColor || \"var(--sl-color-black)\",\n        opacity: props.overlayOpacity,\n      },\n    },\n    Image: {\n      display: \"block\",\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    Background: {\n      backgroundImage: `url(${props.imageUrl})`,\n      backgroundSize: \"cover\",\n      backgroundPosition: props.imagePos || \"center\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n    },\n    Overlay: {\n      zIndex: \"1\",\n      padding:\n        \"calc(var(--sl-spacing-\" +\n        props.paddingText +\n        \") + var(--sl-spacing-\" +\n        props.paddingImage +\n        \"))\",\n      textAlign: \"center\",\n      color: props.textColor || \"var(--sqm-text)\",\n      lineHeight: \"var(--sl-line-height-dense)\",\n      \"@media (max-width: 599px)\": {\n        padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n      },\n    },\n    Column: {\n      display: \"flex\",\n      background: props.backgroundColor || \"\",\n      flexDirection: props.imagePos === \"right\" ? \"row-reverse\" : \"row\",\n      lineHeight: \"var(--sl-line-height-dense)\",\n      color: props.textColor || \"var(--sqm-text)\",\n      \"& .image-area\": {\n        width: props.imagePercentage ? props.imagePercentage + \"%\" : \"50%\",\n        padding: \"var(--sl-spacing-\" + props.paddingImage + \")\",\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        \"@media (max-width: 599px)\": {\n          width: \"100%\",\n        },\n      },\n      \"& .text-area\": {\n        width: props.imagePercentage\n          ? 100 - props.imagePercentage + \"%\"\n          : \"50%\",\n        padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n        alignSelf: \"center\",\n        boxSizing: \"border-box\",\n        \"@media (max-width: 599px)\": {\n          width: \"100%\",\n          textAlign: \"center\",\n          padding: \"calc(0.5*var(--sl-spacing-\" + props.paddingText + \"))\",\n        },\n      },\n      \"@media (max-width: 599px)\": {\n        flexDirection:\n          props.imageMobilePos === \"bottom\" ? \"column-reverse\" : \"column\",\n      },\n    },\n    Header: {\n      fontSize: \"var(--sl-font-size-xxx-large)\",\n      fontWeight: \"var(--sl-font-weight-bold)\",\n      \"@media (max-width: 599px)\": {\n        fontSize: \"var(--sl-font-size-xx-large)\",\n      },\n    },\n    Description: {\n      fontSize: \"var(--sl-font-size-x-large)\",\n      margin: \"var(--sl-spacing-small) 0\",\n      \"@media (max-width: 599px)\": {\n        fontSize: \"var(--sl-font-size-large)\",\n      },\n    },\n    Button: {\n      marginTop: \"var(--sl-spacing-medium)\",\n      \"&::part(base)\": {\n        padding: \"0 var(--sl-spacing-x-large)\",\n        color: \"var(--sqm-primary-button-color)\",\n        backgroundColor: \"var(--sqm-primary-button-background)\",\n        border: \"var(--sqm-primary-button-color-border)\",\n      },\n      \"@media (max-width: 599px)\": {\n        width: \"100%\",\n      },\n    },\n  };\n\n  const sheet = createStyleSheet(style);\n  const styleString = sheet.toString();\n\n  const vanillaStyle = `\n  :host{\n    display: block;\n  }`;\n\n  return (\n    <div class={sheet.classes.Container} part=\"sqm-base\">\n      <style type=\"text/css\">\n        {vanillaStyle}\n        {styleString}\n      </style>\n\n      {props.layout === \"overlay\" && OverlayView()}\n      {props.layout === \"columns\" && ColumnView()}\n    </div>\n  );\n\n  function OverlayView() {\n    return (\n      <div class={sheet.classes.Background}>\n        <div class={sheet.classes.Overlay} part=\"sqm-overlay\">\n          {props.header && (\n            <div class={sheet.classes.Header}>{props.header}</div>\n          )}\n          {props.description && (\n            <div class={sheet.classes.Description}>{props.description}</div>\n          )}\n          {props.buttonText && (\n            <sl-button\n              class={sheet.classes.Button}\n              type=\"primary\"\n              exportparts={`base: ${props.buttonType}button-base`}\n              onClick={() =>\n                props.buttonNewTab\n                  ? window.open(props.buttonLink)\n                  : window.open(props.buttonLink, \"_parent\")\n              }\n            >\n              {props.buttonText}\n            </sl-button>\n          )}\n          {children && children}\n        </div>\n      </div>\n    );\n  }\n\n  function ColumnView() {\n    return (\n      <div>\n        <div class={sheet.classes.Column}>\n          <div class=\"image-area\">\n            <img\n              // @ts-ignore\n              fetchpriority=\"high\"\n              class={sheet.classes.Image}\n              src={props.imageUrl}\n              part=\"sqm-columns-image\"\n              style={{ height: \"200px\", width: \"200px\" }}\n            ></img>\n          </div>\n          <div class=\"text-area\" part=\"sqm-columns-text-area\">\n            {props.header && (\n              <div class={sheet.classes.Header} part=\"sqm-columns-header\">\n                {props.header}\n              </div>\n            )}\n            {props.description && (\n              <div\n                class={sheet.classes.Description}\n                part=\"sqm-columns-description\"\n              >\n                {props.description}\n              </div>\n            )}\n            {props.buttonText && (\n              <sl-button\n                exportparts=\"base: sqm-hero-image-button\"\n                class={sheet.classes.Button}\n                type=\"primary\"\n                onClick={() =>\n                  props.buttonNewTab\n                    ? window.open(props.buttonLink)\n                    : window.open(props.buttonLink, \"_parent\")\n                }\n              >\n                {props.buttonText}\n              </sl-button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n","import { withHooks } from \"@saasquatch/stencil-hooks\";\nimport { Component, h, Prop } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { getProps } from \"../../utils/utils\";\nimport { HeroImageView } from \"./sqm-hero-image-view\";\n\n/**\n * @uiName Hero Image\n * @validParents [\"sqm-portal-container\",\"sqm-brand\", \"div\"]\n * @exampleGroup Common Components\n * @example Two Column Hero Image - <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\"></sqm-hero-image>\n * @example Overlay Hero Image - <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\" 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>\n */\n@Component({\n  tag: \"sqm-hero-image\",\n  shadow: true,\n})\nexport class HeroImage {\n  /**\n   * @uiWidget ImageUpload\n   * @format url\n   * @uiName Image\n   */\n  @Prop() imageUrl: string;\n\n  /**\n   * @uiName Overlay color\n   * @uiWidget color\n   * @format color\n   * @uiGroup Style\n   */\n  @Prop() overlayColor?: string;\n\n  /**\n   * @uiName Overlay opacity\n   * @uiGroup Style\n   */\n  @Prop() overlayOpacity: string = \"0.75\";\n\n  /**\n   * @uiName Text color\n   * @uiWidget color\n   * @format color\n   * @uiGroup Style\n   */\n  @Prop() textColor?: string;\n\n  /**\n   * @uiName Background color\n   * @uiWidget color\n   * @format color\n   * @uiGroup Style\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * @uiName Image layout\n   * @uiType string\n   * @uiEnum [\"overlay\", \"columns\"]\n   * @uiEnumNames [\"Overlay\", \"Two-column\"]\n   * @uiGroup Style\n   */\n  @Prop() layout: \"overlay\" | \"columns\" = \"overlay\";\n\n  /**\n   * @uiName Image percentage\n   * @uiType number\n   * @uiGroup Style\n   */\n  @Prop() imagePercentage: number = 50;\n\n  /**\n   * @uiName Image position\n   * @uiType string\n   * @uiEnum [\"left\", \"center\", \"right\"]\n   * @uiEnumNames [\"Left\", \"Center\", \"Right\"]\n   * @uiGroup Style\n   */\n  @Prop() imagePos: \"left\" | \"center\" | \"right\" = \"center\";\n\n  /**\n   * @uiName Image mobile position\n   * @uiType string\n   * @uiEnum [\"top\", \"bottom\"]\n   * @uiEnumNames [\"Top\", \"Bottom\"]\n   * @uiGroup Style\n   */\n  @Prop() imageMobilePos: \"top\" | \"bottom\" = \"top\";\n\n  /**\n   * @uiName Title\n   */\n  @Prop() header?: string;\n\n  /**\n   * @uiName Description\n   * @uiWidget textArea\n   */\n  @Prop() description?: string;\n\n  /**\n   * @uiName Button text\n   */\n  @Prop() buttonText?: string;\n\n  /**\n   * @uiName Button link\n   */\n  @Prop() buttonLink?: string;\n\n  /**\n   * @uiName Open link in new tab\n   * @default\n   */\n  @Prop() buttonNewTab?: boolean = false;\n\n  /**\n   * @uiName Text padding\n   * @uiType string\n   * @uiEnum [\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]\n   * @uiEnumNames [\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]\n   * @uiGroup Style\n   */\n  @Prop() paddingText: Spacing = \"xxxx-large\";\n\n  /**\n   * @uiName Image padding\n   * @uiType string\n   * @uiEnum [\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]\n   * @uiEnumNames [\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]\n   * @uiGroup Style\n   */\n  @Prop() paddingImage: Spacing = \"none\";\n\n  /**\n   * The type of the button that is used (primary or secondary).\n   * @uiName Button Type\n   * @uiType string\n   * @uiEnum [\"primary\", \"secondary\"]\n   * @uiEnumNames [\"Primary\", \"Secondary\"]\n   * @uiGroup Style\n   */\n  @Prop()\n  buttonType?: \"primary\" | \"secondary\" = \"primary\";\n\n  constructor() {\n    withHooks(this);\n  }\n  disconnectedCallback() {}\n\n  render() {\n    return (\n      <HeroImageView {...getProps(this)}>\n        <slot />\n      </HeroImageView>\n    );\n  }\n}\n"],"names":["withHooks"],"mappings":"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"}

package/dist/mint-components/sqm-hero-image.system.entry.js

@@ -0,0 +1,2 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var e,i=1,a=arguments.length;i<a;i++){e=arguments[i];for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r))t[r]=e[r]}return t};return __assign.apply(this,arguments)};System.register(["./index-CeiuVWtq.system.js","./utils-DCEtL-Px.system.js","./JSS-4UEBNeml.system.js","./jss-preset-default.esm-BTO2c6IP.system.js"],(function(t){"use strict";var e,i,a,r,s;return{setters:[function(t){e=t.h;i=t.r;a=t.d},function(t){r=t.g},function(t){s=t.c},null],execute:function(){function n(t,i){var a=Boolean((t.header||t.description||t.buttonText)&&t.layout==="overlay");var r={Container:{position:"relative","&:before":{content:a?'""':"",width:"100%",height:"100%",position:"absolute",background:t.overlayColor||"var(--sl-color-black)",opacity:t.overlayOpacity}},Image:{display:"block",width:"100%",height:"100%",objectFit:"cover"},Background:{backgroundImage:"url(".concat(t.imageUrl,")"),backgroundSize:"cover",backgroundPosition:t.imagePos||"center",display:"flex",justifyContent:"center",alignItems:"center"},Overlay:{zIndex:"1",padding:"calc(var(--sl-spacing-"+t.paddingText+") + var(--sl-spacing-"+t.paddingImage+"))",textAlign:"center",color:t.textColor||"var(--sqm-text)",lineHeight:"var(--sl-line-height-dense)","@media (max-width: 599px)":{padding:"var(--sl-spacing-"+t.paddingText+")"}},Column:{display:"flex",background:t.backgroundColor||"",flexDirection:t.imagePos==="right"?"row-reverse":"row",lineHeight:"var(--sl-line-height-dense)",color:t.textColor||"var(--sqm-text)","& .image-area":{width:t.imagePercentage?t.imagePercentage+"%":"50%",padding:"var(--sl-spacing-"+t.paddingImage+")",boxSizing:"border-box",display:"flex",justifyContent:"center",alignItems:"center","@media (max-width: 599px)":{width:"100%"}},"& .text-area":{width:t.imagePercentage?100-t.imagePercentage+"%":"50%",padding:"var(--sl-spacing-"+t.paddingText+")",alignSelf:"center",boxSizing:"border-box","@media (max-width: 599px)":{width:"100%",textAlign:"center",padding:"calc(0.5*var(--sl-spacing-"+t.paddingText+"))"}},"@media (max-width: 599px)":{flexDirection:t.imageMobilePos==="bottom"?"column-reverse":"column"}},Header:{fontSize:"var(--sl-font-size-xxx-large)",fontWeight:"var(--sl-font-weight-bold)","@media (max-width: 599px)":{fontSize:"var(--sl-font-size-xx-large)"}},Description:{fontSize:"var(--sl-font-size-x-large)",margin:"var(--sl-spacing-small) 0","@media (max-width: 599px)":{fontSize:"var(--sl-font-size-large)"}},Button:{marginTop:"var(--sl-spacing-medium)","&::part(base)":{padding:"0 var(--sl-spacing-x-large)",color:"var(--sqm-primary-button-color)",backgroundColor:"var(--sqm-primary-button-background)",border:"var(--sqm-primary-button-color-border)"},"@media (max-width: 599px)":{width:"100%"}}};var n=s(r);var o=n.toString();var l="\n  :host{\n    display: block;\n  }";return e("div",{class:n.classes.Container,part:"sqm-base"},e("style",{type:"text/css"},l,o),t.layout==="overlay"&&c(),t.layout==="columns"&&d());function c(){return e("div",{class:n.classes.Background},e("div",{class:n.classes.Overlay,part:"sqm-overlay"},t.header&&e("div",{class:n.classes.Header},t.header),t.description&&e("div",{class:n.classes.Description},t.description),t.buttonText&&e("sl-button",{class:n.classes.Button,type:"primary",exportparts:"base: ".concat(t.buttonType,"button-base"),onClick:function(){return t.buttonNewTab?window.open(t.buttonLink):window.open(t.buttonLink,"_parent")}},t.buttonText),i&&i))}function d(){return e("div",null,e("div",{class:n.classes.Column},e("div",{class:"image-area"},e("img",{fetchpriority:"high",class:n.classes.Image,src:t.imageUrl,part:"sqm-columns-image",style:{height:"200px",width:"200px"}})),e("div",{class:"text-area",part:"sqm-columns-text-area"},t.header&&e("div",{class:n.classes.Header,part:"sqm-columns-header"},t.header),t.description&&e("div",{class:n.classes.Description,part:"sqm-columns-description"},t.description),t.buttonText&&e("sl-button",{exportparts:"base: sqm-hero-image-button",class:n.classes.Button,type:"primary",onClick:function(){return t.buttonNewTab?window.open(t.buttonLink):window.open(t.buttonLink,"_parent")}},t.buttonText))))}}var o=t("sqm_hero_image",function(){function t(t){i(this,t);this.overlayOpacity="0.75";this.layout="overlay";this.imagePercentage=50;this.imagePos="center";this.imageMobilePos="top";this.buttonNewTab=false;this.paddingText="xxxx-large";this.paddingImage="none";this.buttonType="primary";a(this)}t.prototype.disconnectedCallback=function(){};t.prototype.render=function(){return e(n,__assign({key:"fb5d09ef07802124af5cae8f0dbd043b74055184"},r(this)),e("slot",{key:"8a2bc9b443967bf343dff20799e8ed03a8b11df3"}))};return t}())}}}));
+//# sourceMappingURL=sqm-hero-image.system.entry.js.map

package/dist/mint-components/sqm-hero-image.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["System","register","exports","h","registerInstance","h$1","getProps","createStyleSheet","setters","module","r","d","g","c","execute","HeroImageView","props","children","overlay","Boolean","header","description","buttonText","layout","style","Container","position","content","width","height","background","overlayColor","opacity","overlayOpacity","Image","display","objectFit","Background","backgroundImage","concat","imageUrl","backgroundSize","backgroundPosition","imagePos","justifyContent","alignItems","Overlay","zIndex","padding","paddingText","paddingImage","textAlign","color","textColor","lineHeight","Column","backgroundColor","flexDirection","imagePercentage","boxSizing","alignSelf","imageMobilePos","Header","fontSize","fontWeight","Description","margin","Button","marginTop","border","sheet","styleString","toString","vanillaStyle","class","classes","part","type","OverlayView","ColumnView","exportparts","buttonType","onClick","buttonNewTab","window","open","buttonLink","fetchpriority","src","HeroImage","class_1","hostRef","this","prototype","disconnectedCallback","render","__assign","key"],"sources":["module.ts"],"mappings":"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","ignoreList":[]}

package/docs/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-05T19:22:20",
+  "timestamp": "2025-11-05T19:32:34",
   "compiler": {
     "name": "node",
     "version": "16.20.1"
@@ -1426,6 +1426,8 @@
           "./dist/mint-components/p-41254bdc.system.entry.js.map",
           "./dist/mint-components/p-4394c2cd.entry.js",
           "./dist/mint-components/p-4394c2cd.entry.js.map",
+          "./dist/mint-components/p-46b98516.system.entry.js",
+          "./dist/mint-components/p-46b98516.system.entry.js.map",
           "./dist/mint-components/p-46f4587a.entry.js",
           "./dist/mint-components/p-46f4587a.entry.js.map",
           "./dist/mint-components/p-479QO5JV.js",
@@ -1460,8 +1462,6 @@
           "./dist/mint-components/p-7d2e3a64.entry.js.map",
           "./dist/mint-components/p-7d3d6fbe.entry.js",
           "./dist/mint-components/p-7d3d6fbe.entry.js.map",
-          "./dist/mint-components/p-7de6c83d.system.entry.js",
-          "./dist/mint-components/p-7de6c83d.system.entry.js.map",
           "./dist/mint-components/p-7eba3b9c.entry.js",
           "./dist/mint-components/p-7eba3b9c.entry.js.map",
           "./dist/mint-components/p-8105f234.system.entry.js",
@@ -1658,8 +1658,6 @@
           "./dist/mint-components/p-b04d7197.system.entry.js.map",
           "./dist/mint-components/p-b23ee013.entry.js",
           "./dist/mint-components/p-b23ee013.entry.js.map",
-          "./dist/mint-components/p-b71ccea6.entry.js",
-          "./dist/mint-components/p-b71ccea6.entry.js.map",
           "./dist/mint-components/p-b7a4096e.system.entry.js",
           "./dist/mint-components/p-b7a4096e.system.entry.js.map",
           "./dist/mint-components/p-b8b0c05a.entry.js",
@@ -1710,6 +1708,8 @@
           "./dist/mint-components/p-f320a577.system.entry.js.map",
           "./dist/mint-components/p-f3cd36bc.entry.js",
           "./dist/mint-components/p-f3cd36bc.entry.js.map",
+          "./dist/mint-components/p-f43827dd.entry.js",
+          "./dist/mint-components/p-f43827dd.entry.js.map",
           "./dist/mint-components/p-f65b9dca.system.entry.js",
           "./dist/mint-components/p-f65b9dca.system.entry.js.map",
           "./dist/mint-components/p-fa8bd7eb.entry.js",
@@ -2527,8 +2527,8 @@
           "sqm-timeline-entry",
           "sqm-user-name"
         ],
-        "bundleId": "p-b71ccea6",
-        "fileName": "p-b71ccea6.entry.js",
+        "bundleId": "p-f43827dd",
+        "fileName": "p-f43827dd.entry.js",
         "imports": [
           "p-COVpyZ4W.js",
           "p-De5v93t1.js",
@@ -2557,7 +2557,7 @@
           "p-CVnd0DX8.js",
           "p-DgUFXAxy.js"
         ],
-        "originalByteSize": 305441
+        "originalByteSize": 305537
       },
       {
         "key": "sqm-stencilbook.entry",
@@ -3405,7 +3405,7 @@
           "luxon-CVnd0DX8.js",
           "useReferralCodes-ijEvrSQk.js"
         ],
-        "originalByteSize": 305730
+        "originalByteSize": 305826
       },
       {
         "key": "sqm-stencilbook.entry",
@@ -4253,7 +4253,7 @@
           "luxon-CVnd0DX8.js",
           "useReferralCodes-ijEvrSQk.js"
         ],
-        "originalByteSize": 305730
+        "originalByteSize": 305826
       },
       {
         "key": "sqm-stencilbook.entry",
@@ -5071,8 +5071,8 @@
           "sqm-timeline-entry",
           "sqm-user-name"
         ],
-        "bundleId": "p-7de6c83d.system",
-        "fileName": "p-7de6c83d.system.entry.js",
+        "bundleId": "p-46b98516.system",
+        "fileName": "p-46b98516.system.entry.js",
         "imports": [
           "p-sNvEmFWl.system.js",
           "p-kgKM0pKh.system.js",
@@ -5101,7 +5101,7 @@
           "p-ByOZdCpB.system.js",
           "p-Cd9vDVaG.system.js"
         ],
-        "originalByteSize": 393318
+        "originalByteSize": 393450
       },
       {
         "key": "sqm-stencilbook.entry",
@@ -5949,7 +5949,7 @@
           "luxon-Bn1pwyaf.js",
           "useReferralCodes-D8aTVuMy.js"
         ],
-        "originalByteSize": 308812
+        "originalByteSize": 308908
       },
       {
         "key": "sqm-stencilbook.entry",
@@ -81413,8 +81413,9 @@
             "type",
             "exportparts",
             "onClick",
-            "loading",
-            "src"
+            "fetchpriority",
+            "src",
+            "style"
           ],
           "htmlTagNames": [
             "slot",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.4-6",
+  "version": "2.0.4-8",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",