@saasquatch/mint-components 1.5.0-46 → 1.5.0-47

package/dist/cjs/{AutoColor-b84c7159.js → AutoColor-c10e3534.js}

@@ -21,8 +21,8 @@ function ShareButtonView(props, children) {
       border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
     }
     *::part(label) {
-      position: relative;
-	  top: 5%;
+    //   position: relative;
+	//   top: 5%;
     }
   `;
   const style = {
@@ -1155,24 +1155,9 @@ function TaskCardView(props) {
         id: "startsOnMessage",
         defaultMessage: content.startsOnMessage,
       }, {
-        startDate: states.locale.includes("en")
-          ? dateStart
-            .setLocale(utils.luxonLocale(states.locale))
-            .toLocaleString(luxon.luxon.DateTime.DATETIME_MED)
-            .split(",")
-            .slice(0, 2)
-            .join(",") +
-            " at " +
-            dateStart
-              .setLocale(utils.luxonLocale(states.locale))
-              .toLocaleString(luxon.luxon.DateTime.DATETIME_MED)
-              .split(",")
-              .slice(2)
-              .join(",")
-              .toLowerCase()
-          : dateStart
-            .setLocale(utils.luxonLocale(states.locale))
-            .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
+        startDate: dateStart
+          .setLocale(utils.luxonLocale(states.locale))
+          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
     !states.loading && taskEnded && (index.h("div", { class: sheet$6.classes.Ended },
       index.h("span", { class: "icon" },
@@ -1181,24 +1166,9 @@ function TaskCardView(props) {
         id: "endedMessage",
         defaultMessage: content.endedMessage,
       }, {
-        endDate: states.locale.includes("en")
-          ? dateEnd
-            .setLocale(utils.luxonLocale(states.locale))
-            .toLocaleString(luxon.luxon.DateTime.DATETIME_MED)
-            .split(",")
-            .slice(0, 2)
-            .join(",") +
-            " at " +
-            dateEnd
-              .setLocale(utils.luxonLocale(states.locale))
-              .toLocaleString(luxon.luxon.DateTime.DATETIME_MED)
-              .split(",")
-              .slice(2)
-              .join(",")
-              .toLowerCase()
-          : dateEnd
-            .setLocale(states.locale)
-            .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
+        endDate: dateEnd
+          .setLocale(states.locale)
+          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
     index.h("div", { style: {
         borderRadius: taskUnavailable &&
@@ -1249,24 +1219,9 @@ function TaskCardView(props) {
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {
-              endDate: states.locale.includes("en")
-                ? dateEnd
-                  .setLocale(utils.luxonLocale(states.locale))
-                  .toLocaleString(luxon.luxon.DateTime.DATETIME_MED)
-                  .split(",")
-                  .slice(0, 2)
-                  .join(",") +
-                  " at " +
-                  dateEnd
-                    .setLocale(utils.luxonLocale(states.locale))
-                    .toLocaleString(luxon.luxon.DateTime.DATETIME_MED)
-                    .split(",")
-                    .slice(2)
-                    .join(",")
-                    .toLowerCase()
-                : dateEnd
-                  .setLocale(utils.luxonLocale(states.locale))
-                  .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
+              endDate: dateEnd
+                .setLocale(utils.luxonLocale(states.locale))
+                .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
             })))),
           index.h("sl-button", { class: taskUnavailable
               ? "action neutral"

package/dist/cjs/sqm-brand_26.cjs.entry.js

@@ -20,7 +20,7 @@ const utils = require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
 const useDemoBigStat = require('./useDemoBigStat-5f2198a1.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-185b4bd0.js');
-const AutoColor = require('./AutoColor-b84c7159.js');
+const AutoColor = require('./AutoColor-c10e3534.js');
 require('./sqm-portal-section-view-3b6c990e.js');
 
 /**
@@ -5223,30 +5223,49 @@ const ProgramMenu = class {
   }
 };
 
-function ReferralCardView(props, children) {
+function ReferralCardView(props) {
   const style = {
     Container: {
       display: "flex",
+      color: "var(--sl-color-neutral-900)",
       "& .left": {
         width: "50%",
         padding: "var(--sl-spacing-" + props.padding + ")",
+        paddingRight: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
       },
       "& .right": {
         width: "50%",
         padding: "var(--sl-spacing-" + props.padding + ")",
+        paddingLeft: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+        },
       },
       border: "1px solid var(--sl-color-neutral-300)",
       borderRadius: "var(--sl-border-radius-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+        border: "none",
+      },
     },
     Text: {
       textAlign: "center",
-      marginBottom: "var(--sl-spacing-large)",
+      marginBottom: "var(--sl-spacing-xx-large)",
       "& .header": {
-        fontSize: "var(--sl-font-size-large)",
+        fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-neutral-900)",
       },
       "& .description": {
+        fontSize: "var(--sl-font-size-large)",
         color: "var(--sl-color-neutral-600)",
       },
     },
@@ -5284,9 +5303,9 @@ const ReferralCard = class {
     /**
      * @uiName Padding
      * @uiType string
-     * @uiEnum ["top", "center"]
+     * @uiEnum ["start", "center", "end"]
      */
-    this.verticalAlignment = "top";
+    this.verticalAlignment = "start";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }

package/dist/cjs/{sqm-stat-container-view-80e19a3e.js → sqm-stat-container-view-5b2db929.js}

@@ -24,7 +24,7 @@ function StatContainerView(props, children) {
       },
       "& > ::slotted(*)": {
         "border-right": "1px solid #EAEAEA",
-        // "padding-right": divideSpace(),
+        "padding-right": divideSpace(),
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {

package/dist/cjs/sqm-stat-container.cjs.entry.js

@@ -7,7 +7,7 @@ const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./extends-08099afd.js');
 require('./JSS-c65a40f1.js');
 const utils = require('./utils-01dbfd4a.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-80e19a3e.js');
+const sqmStatContainerView = require('./sqm-stat-container-view-5b2db929.js');
 
 const StatContainer = class {
   constructor(hostRef) {

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -33,8 +33,8 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-185b4bd0.js'
 const sqmPortalProfileView = require('./sqm-portal-profile-view-cdd94542.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-80e19a3e.js');
-const AutoColor = require('./AutoColor-b84c7159.js');
+const sqmStatContainerView = require('./sqm-stat-container-view-5b2db929.js');
+const AutoColor = require('./AutoColor-c10e3534.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-3b6c990e.js');
 
 /**
@@ -10487,13 +10487,19 @@ const ReferralCard = () => {
   return (index.h("div", null,
     index.h("sqm-referral-card", { header: "Share $50 with friends", description: "They\u2019ll get a $50 credit towards a new account and you\u2019ll get up to $1250." },
       index.h("div", { slot: "left" },
-        index.h("sqm-text", null,
-          index.h("h3", null, "Get rewarded when your friend uses Klip")),
+        "Get rewarded when your friend uses Klip",
         index.h("sqm-media", { "image-url": "https://i.imgur.com/L3aRMde.png", "min-height": "0" })),
-      index.h("div", { slot: "right" },
-        index.h("sqm-share-code", null),
-        index.h("sqm-share-link", null),
-        index.h("sqm-share-button", null)))));
+      index.h("sqm-portal-container", { gap: "large", slot: "right" },
+        index.h("sqm-text", null, "Choose how you want to share:"),
+        index.h("sqm-text", { style: {
+            fontSize: "var(--sl-font-size-medium)",
+            color: "var(--sl-color-neutral-600)",
+          } },
+          "Your unique referral link:",
+          index.h("sqm-share-code", null)),
+        index.h("sqm-share-button", { medium: "email", icon: "envelope", backgroundcolor: "#666666", textcolor: "#fff" }, "Share via email"),
+        index.h("sqm-share-button", { medium: "facebook", backgroundcolor: "#0671E6", textcolor: "#fff" }, "Share on Facebook"),
+        index.h("sqm-share-button", { medium: "twitter", backgroundcolor: "#47ACDF", textcolor: "#fff" }, "Tweet about us")))));
 };
 const TimelineWith1Reward = () => {
   return (index.h("div", null,

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -3,16 +3,30 @@ export default {
   title: "Components/Referral Card",
 };
 export const ReferralCard = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    borderradius: 8,
+    iconslot: "prefix",
+  };
   return (h("div", null,
     h("sqm-referral-card", { header: "Share $50 with friends", description: "They\u2019ll get a $50 credit towards a new account and you\u2019ll get up to $1250." },
       h("div", { slot: "left" },
-        h("sqm-text", null,
-          h("h3", null, "Get rewarded when your friend uses Klip")),
+        "Get rewarded when your friend uses Klip",
         h("sqm-media", { "image-url": "https://i.imgur.com/L3aRMde.png", "min-height": "0" })),
-      h("div", { slot: "right" },
-        h("sqm-share-code", null),
-        h("sqm-share-link", null),
-        h("sqm-share-button", null)))));
+      h("sqm-portal-container", { gap: "large", slot: "right" },
+        h("sqm-text", null, "Choose how you want to share:"),
+        h("sqm-text", { style: {
+            fontSize: "var(--sl-font-size-medium)",
+            color: "var(--sl-color-neutral-600)",
+          } },
+          "Your unique referral link:",
+          h("sqm-share-code", null)),
+        h("sqm-share-button", { medium: "email", icon: "envelope", backgroundcolor: "#666666", textcolor: "#fff" }, "Share via email"),
+        h("sqm-share-button", { medium: "facebook", backgroundcolor: "#0671E6", textcolor: "#fff" }, "Share on Facebook"),
+        h("sqm-share-button", { medium: "twitter", backgroundcolor: "#47ACDF", textcolor: "#fff" }, "Tweet about us")))));
 };
 {
   /* <sqm-timeline slot="left">

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

@@ -1,29 +1,48 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-export function ReferralCardView(props, children) {
+export function ReferralCardView(props) {
   const style = {
     Container: {
       display: "flex",
+      color: "var(--sl-color-neutral-900)",
       "& .left": {
         width: "50%",
         padding: "var(--sl-spacing-" + props.padding + ")",
+        paddingRight: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
       },
       "& .right": {
         width: "50%",
         padding: "var(--sl-spacing-" + props.padding + ")",
+        paddingLeft: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+        },
       },
       border: "1px solid var(--sl-color-neutral-300)",
       borderRadius: "var(--sl-border-radius-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+        border: "none",
+      },
     },
     Text: {
       textAlign: "center",
-      marginBottom: "var(--sl-spacing-large)",
+      marginBottom: "var(--sl-spacing-xx-large)",
       "& .header": {
-        fontSize: "var(--sl-font-size-large)",
+        fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-neutral-900)",
       },
       "& .description": {
+        fontSize: "var(--sl-font-size-large)",
         color: "var(--sl-color-neutral-600)",
       },
     },

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

@@ -17,9 +17,9 @@ export class ReferralCard {
     /**
      * @uiName Padding
      * @uiType string
-     * @uiEnum ["top", "center"]
+     * @uiEnum ["start", "center", "end"]
      */
-    this.verticalAlignment = "top";
+    this.verticalAlignment = "start";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -110,8 +110,8 @@ export class ReferralCard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"top\" | \"center\"",
-        "resolved": "\"center\" | \"top\"",
+        "original": "\"start\" | \"center\" | \"end\"",
+        "resolved": "\"center\" | \"end\" | \"start\"",
         "references": {}
       },
       "required": false,
@@ -124,14 +124,14 @@ export class ReferralCard {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"top\", \"center\"]",
+            "text": "[\"start\", \"center\", \"end\"]",
             "name": "uiEnum"
           }],
         "text": ""
       },
       "attribute": "vertical-alignment",
       "reflect": false,
-      "defaultValue": "\"top\""
+      "defaultValue": "\"start\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -9,8 +9,8 @@ export function ShareButtonView(props, children) {
       border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
     }
     *::part(label) {
-      position: relative;
-	  top: 5%;
+    //   position: relative;
+	//   top: 5%;
     }
   `;
   const style = {

package/dist/collection/components/sqm-stat-container/sqm-stat-container-view.js

@@ -21,7 +21,7 @@ export function StatContainerView(props, children) {
       },
       "& > ::slotted(*)": {
         "border-right": "1px solid #EAEAEA",
-        // "padding-right": divideSpace(),
+        "padding-right": divideSpace(),
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {

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

@@ -207,24 +207,9 @@ export function TaskCardView(props) {
         id: "startsOnMessage",
         defaultMessage: content.startsOnMessage,
       }, {
-        startDate: states.locale.includes("en")
-          ? dateStart
-            .setLocale(luxonLocale(states.locale))
-            .toLocaleString(DateTime.DATETIME_MED)
-            .split(",")
-            .slice(0, 2)
-            .join(",") +
-            " at " +
-            dateStart
-              .setLocale(luxonLocale(states.locale))
-              .toLocaleString(DateTime.DATETIME_MED)
-              .split(",")
-              .slice(2)
-              .join(",")
-              .toLowerCase()
-          : dateStart
-            .setLocale(luxonLocale(states.locale))
-            .toLocaleString(DateTime.DATETIME_MED),
+        startDate: dateStart
+          .setLocale(luxonLocale(states.locale))
+          .toLocaleString(DateTime.DATETIME_MED),
       }))),
     !states.loading && taskEnded && (h("div", { class: sheet.classes.Ended },
       h("span", { class: "icon" },
@@ -233,24 +218,9 @@ export function TaskCardView(props) {
         id: "endedMessage",
         defaultMessage: content.endedMessage,
       }, {
-        endDate: states.locale.includes("en")
-          ? dateEnd
-            .setLocale(luxonLocale(states.locale))
-            .toLocaleString(DateTime.DATETIME_MED)
-            .split(",")
-            .slice(0, 2)
-            .join(",") +
-            " at " +
-            dateEnd
-              .setLocale(luxonLocale(states.locale))
-              .toLocaleString(DateTime.DATETIME_MED)
-              .split(",")
-              .slice(2)
-              .join(",")
-              .toLowerCase()
-          : dateEnd
-            .setLocale(states.locale)
-            .toLocaleString(DateTime.DATETIME_MED),
+        endDate: dateEnd
+          .setLocale(states.locale)
+          .toLocaleString(DateTime.DATETIME_MED),
       }))),
     h("div", { style: {
         borderRadius: taskUnavailable &&
@@ -301,24 +271,9 @@ export function TaskCardView(props) {
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {
-              endDate: states.locale.includes("en")
-                ? dateEnd
-                  .setLocale(luxonLocale(states.locale))
-                  .toLocaleString(DateTime.DATETIME_MED)
-                  .split(",")
-                  .slice(0, 2)
-                  .join(",") +
-                  " at " +
-                  dateEnd
-                    .setLocale(luxonLocale(states.locale))
-                    .toLocaleString(DateTime.DATETIME_MED)
-                    .split(",")
-                    .slice(2)
-                    .join(",")
-                    .toLowerCase()
-                : dateEnd
-                  .setLocale(luxonLocale(states.locale))
-                  .toLocaleString(DateTime.DATETIME_MED),
+              endDate: dateEnd
+                .setLocale(luxonLocale(states.locale))
+                .toLocaleString(DateTime.DATETIME_MED),
             })))),
           h("sl-button", { class: taskUnavailable
               ? "action neutral"

package/dist/esm/{AutoColor-08674820.js → AutoColor-7514ecea.js}

@@ -19,8 +19,8 @@ function ShareButtonView(props, children) {
       border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
     }
     *::part(label) {
-      position: relative;
-	  top: 5%;
+    //   position: relative;
+	//   top: 5%;
     }
   `;
   const style = {
@@ -1153,24 +1153,9 @@ function TaskCardView(props) {
         id: "startsOnMessage",
         defaultMessage: content.startsOnMessage,
       }, {
-        startDate: states.locale.includes("en")
-          ? dateStart
-            .setLocale(luxonLocale(states.locale))
-            .toLocaleString(luxon.DateTime.DATETIME_MED)
-            .split(",")
-            .slice(0, 2)
-            .join(",") +
-            " at " +
-            dateStart
-              .setLocale(luxonLocale(states.locale))
-              .toLocaleString(luxon.DateTime.DATETIME_MED)
-              .split(",")
-              .slice(2)
-              .join(",")
-              .toLowerCase()
-          : dateStart
-            .setLocale(luxonLocale(states.locale))
-            .toLocaleString(luxon.DateTime.DATETIME_MED),
+        startDate: dateStart
+          .setLocale(luxonLocale(states.locale))
+          .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
     !states.loading && taskEnded && (h("div", { class: sheet$6.classes.Ended },
       h("span", { class: "icon" },
@@ -1179,24 +1164,9 @@ function TaskCardView(props) {
         id: "endedMessage",
         defaultMessage: content.endedMessage,
       }, {
-        endDate: states.locale.includes("en")
-          ? dateEnd
-            .setLocale(luxonLocale(states.locale))
-            .toLocaleString(luxon.DateTime.DATETIME_MED)
-            .split(",")
-            .slice(0, 2)
-            .join(",") +
-            " at " +
-            dateEnd
-              .setLocale(luxonLocale(states.locale))
-              .toLocaleString(luxon.DateTime.DATETIME_MED)
-              .split(",")
-              .slice(2)
-              .join(",")
-              .toLowerCase()
-          : dateEnd
-            .setLocale(states.locale)
-            .toLocaleString(luxon.DateTime.DATETIME_MED),
+        endDate: dateEnd
+          .setLocale(states.locale)
+          .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
     h("div", { style: {
         borderRadius: taskUnavailable &&
@@ -1247,24 +1217,9 @@ function TaskCardView(props) {
               id: "expiryMessage",
               defaultMessage: content.expiryMessage,
             }, {
-              endDate: states.locale.includes("en")
-                ? dateEnd
-                  .setLocale(luxonLocale(states.locale))
-                  .toLocaleString(luxon.DateTime.DATETIME_MED)
-                  .split(",")
-                  .slice(0, 2)
-                  .join(",") +
-                  " at " +
-                  dateEnd
-                    .setLocale(luxonLocale(states.locale))
-                    .toLocaleString(luxon.DateTime.DATETIME_MED)
-                    .split(",")
-                    .slice(2)
-                    .join(",")
-                    .toLowerCase()
-                : dateEnd
-                  .setLocale(luxonLocale(states.locale))
-                  .toLocaleString(luxon.DateTime.DATETIME_MED),
+              endDate: dateEnd
+                .setLocale(luxonLocale(states.locale))
+                .toLocaleString(luxon.DateTime.DATETIME_MED),
             })))),
           h("sl-button", { class: taskUnavailable
               ? "action neutral"

package/dist/esm/sqm-brand_26.entry.js

@@ -16,7 +16,7 @@ import { g as getProps, a as getMissingProps } from './utils-1d345130.js';
 import './sqm-text-span-view-7e61c95c.js';
 import { p as pathToRegexp, u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-f62fbdcd.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-cf79ed90.js';
-import { h as autoColorScaleCss, C as CardFeedView, E as EditProfileView, c as PortalChangePasswordView, P as PortalFrameView, d as PortalLoginView, e as PortalRegisterView, R as ReferralIframeView, g as RewardExchangeView, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './AutoColor-08674820.js';
+import { h as autoColorScaleCss, C as CardFeedView, E as EditProfileView, c as PortalChangePasswordView, P as PortalFrameView, d as PortalLoginView, e as PortalRegisterView, R as ReferralIframeView, g as RewardExchangeView, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './AutoColor-7514ecea.js';
 import './sqm-portal-section-view-d3098f7f.js';
 
 /**
@@ -5219,30 +5219,49 @@ const ProgramMenu = class {
   }
 };
 
-function ReferralCardView(props, children) {
+function ReferralCardView(props) {
   const style = {
     Container: {
       display: "flex",
+      color: "var(--sl-color-neutral-900)",
       "& .left": {
         width: "50%",
         padding: "var(--sl-spacing-" + props.padding + ")",
+        paddingRight: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
       },
       "& .right": {
         width: "50%",
         padding: "var(--sl-spacing-" + props.padding + ")",
+        paddingLeft: "var(--sl-spacing-medium)",
+        alignSelf: props.verticalAlignment,
+        "@media (max-width: 499px)": {
+          width: "100%",
+          padding: "0",
+        },
       },
       border: "1px solid var(--sl-color-neutral-300)",
       borderRadius: "var(--sl-border-radius-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+        border: "none",
+      },
     },
     Text: {
       textAlign: "center",
-      marginBottom: "var(--sl-spacing-large)",
+      marginBottom: "var(--sl-spacing-xx-large)",
       "& .header": {
-        fontSize: "var(--sl-font-size-large)",
+        fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-neutral-900)",
       },
       "& .description": {
+        fontSize: "var(--sl-font-size-large)",
         color: "var(--sl-color-neutral-600)",
       },
     },
@@ -5280,9 +5299,9 @@ const ReferralCard = class {
     /**
      * @uiName Padding
      * @uiType string
-     * @uiEnum ["top", "center"]
+     * @uiEnum ["start", "center", "end"]
      */
-    this.verticalAlignment = "top";
+    this.verticalAlignment = "start";
     h(this);
   }
   disconnectedCallback() { }

package/dist/esm/{sqm-stat-container-view-3cb831f3.js → sqm-stat-container-view-8a565c5a.js}

@@ -22,7 +22,7 @@ function StatContainerView(props, children) {
       },
       "& > ::slotted(*)": {
         "border-right": "1px solid #EAEAEA",
-        // "padding-right": divideSpace(),
+        "padding-right": divideSpace(),
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {

package/dist/esm/sqm-stat-container.entry.js

@@ -3,7 +3,7 @@ import { m as h } from './stencil-hooks.module-2f159754.js';
 import './extends-c31f1eff.js';
 import './JSS-96eeab98.js';
 import { g as getProps } from './utils-1d345130.js';
-import { S as StatContainerView } from './sqm-stat-container-view-3cb831f3.js';
+import { S as StatContainerView } from './sqm-stat-container-view-8a565c5a.js';
 
 const StatContainer = class {
   constructor(hostRef) {