@saasquatch/mint-components 1.5.0-49 → 1.5.0-52

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

@@ -324,7 +324,7 @@ function useLeaderboardDemo(props) {
         usersheading: props.usersheading
           ? props.usersheading
           : "TOP REFERRERS",
-        statsheading: props.statsheading ? props.statsheading : "NEW TITANS",
+        statsheading: props.statsheading ? props.statsheading : "NEW CUSTOMERS",
       },
     },
     data: {

package/dist/collection/components/sqm-leaderboard-rank/useLeaderboardRank.js

@@ -26,10 +26,9 @@ export function useLeaderboardRank(props) {
     rankVariables.filter["interval"] = props.interval;
   }
   const { data: rankData } = useQuery(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank)
-    ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
-      rank: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c[props.rankType],
-    })
+  const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank) ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
+    rank: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c[props.rankType],
+  })
     : props.unrankedText || "unranked";
   return {
     data: {

package/dist/collection/components/sqm-media/HeroImage.stories.js

@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Hero Image",
+};
+export const OverlayHeader = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay" }));
+};
+export const OverlayDescription = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay" }));
+};
+export const OverlayButton = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay" }));
+};
+export const OverlayLong = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay" }));
+};
+export const OverlayLeft = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left" }));
+};
+export const OverlayCenter = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center" }));
+};
+export const OverlayRight = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right" }));
+};
+export const OverlayCustom = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay" }));
+};
+export const Columns = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns" }));
+};
+export const ColumnsReverse = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
+};
+export const ColumnsCustom = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+};

package/dist/collection/components/sqm-media/{sqm-media-view.js → sqm-hero-image-view.js}

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-export function MediaView(props) {
+export function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
   const style = {
@@ -23,13 +23,19 @@ export function MediaView(props) {
       objectFit: "cover",
       margin: "auto",
     },
+    Background: {
+      minHeight: props.minHeight,
+      backgroundImage: `url(${props.imageUrl})`,
+      backgroundSize: "cover",
+      backgroundPosition: props.imagePos || "center",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
     Overlay: {
-      position: "absolute",
-      width: "90%",
-      top: "50%",
-      left: "50%",
+      zIndex: "1",
+      padding: "var(--sl-spacing-" + props.padding + ")",
       textAlign: "center",
-      transform: "translate(-50%, -50%)",
       color: props.textColor || "var(--sl-color-neutral-0)",
       lineHeight: "var(--sl-line-height-dense)",
     },
@@ -41,35 +47,37 @@ export function MediaView(props) {
       color: props.textColor || "var(--sl-color-neutral-900)",
       "& .image-area": {
         width: "50%",
-        "@media (max-width: 499px)": {
+        boxSizing: "border-box",
+        "@media (max-width: 599px)": {
           width: "100%",
         },
       },
       "& .text-area": {
         width: "50%",
-        padding: "calc(2*var(--sl-spacing-xx-large))",
+        padding: "calc(2*var(--sl-spacing-" + props.padding + "))",
         alignSelf: "center",
-        "@media (max-width: 499px)": {
-          width: "90%",
+        boxSizing: "border-box",
+        "@media (max-width: 599px)": {
+          width: "100%",
           textAlign: "center",
-          padding: "var(--sl-spacing-xx-large)",
+          padding: "var(--sl-spacing-" + props.padding + ")",
         },
       },
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
       },
     },
     Header: {
       fontSize: "var(--sl-font-size-xxx-large)",
       fontWeight: "var(--sl-font-weight-bold)",
-      "@media (max-width: 499px)": {
+      "@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: 499px)": {
+      "@media (max-width: 599px)": {
         fontSize: "var(--sl-font-size-large)",
       },
     },
@@ -78,7 +86,7 @@ export function MediaView(props) {
       "&::part(base)": {
         padding: "0 var(--sl-spacing-x-large)",
       },
-      "@media (max-width: 499px)": {
+      "@media (max-width: 599px)": {
         width: "100%",
       },
     },
@@ -96,14 +104,14 @@ export function MediaView(props) {
     props.layout === "overlay" && OverlayView(),
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
-    return (h("div", null,
-      props.imageUrl && (h("img", { class: sheet.classes.Image, src: props.imageUrl })),
+    return (h("div", { class: sheet.classes.Background },
       h("div", { class: sheet.classes.Overlay },
         props.header && (h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h("div", { class: sheet.classes.Description }, props.description)),
         props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
-            : window.open(props.buttonLink, "_parent") }, props.buttonText)))));
+            : window.open(props.buttonLink, "_parent") }, props.buttonText)),
+        children && children)));
   }
   function ColumnView() {
     return (h("div", null,

package/dist/collection/components/sqm-media/{sqm-media.js → sqm-hero-image.js}

@@ -1,12 +1,16 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import { getProps } from "../../utils/utils";
-import { MediaView } from "./sqm-media-view";
+import { HeroImageView } from "./sqm-hero-image-view";
 /**
- * @uiName Media
+ * @uiName Hero Image
  */
-export class Media {
+export class HeroImage {
   constructor() {
+    /**
+     * @uiName Minimum Image Height
+     */
+    this.minHeight = "300px";
     /**
      * @uiName Overlay Color
      */
@@ -15,10 +19,6 @@ export class Media {
      * @uiName Overlay Opacity
      */
     this.overlayOpacity = "0.75";
-    /**
-     * @uiName Minimum Image Height
-     */
-    this.minHeight = "300px";
     /**
      * @uiName Image Link
      * @uiType string
@@ -28,26 +28,33 @@ export class Media {
     /**
      * @uiName Image Position
      * @uiType string
-     * @uiEnum ["left", "right"]
+     * @uiEnum ["left", "center", "right"]
      */
-    this.imagePos = "left";
+    this.imagePos = "center";
     /**
      * @uiName Image Mobile Position
      * @uiType string
-     * @uiEnum ["top", "bottom" ]
+     * @uiEnum ["top", "bottom"]
      */
     this.imageMobilePos = "top";
     /**
      * @uiName CTA Button Link Open in New Tab
      */
     this.buttonNewTab = false;
+    /**
+     * @uiName Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.padding = "xx-large";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    return h(MediaView, Object.assign({}, getProps(this)));
+    return (h(HeroImageView, Object.assign({}, getProps(this)),
+      h("slot", null)));
   }
-  static get is() { return "sqm-media"; }
+  static get is() { return "sqm-hero-image"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "imageUrl": {
@@ -70,6 +77,27 @@ export class Media {
       "attribute": "image-url",
       "reflect": false
     },
+    "minHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Minimum Image Height",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": false,
+      "defaultValue": "\"300px\""
+    },
     "overlayColor": {
       "type": "string",
       "mutable": false,
@@ -152,27 +180,6 @@ export class Media {
       "attribute": "background-color",
       "reflect": false
     },
-    "minHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Minimum Image Height",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "min-height",
-      "reflect": false,
-      "defaultValue": "\"300px\""
-    },
     "layout": {
       "type": "string",
       "mutable": false,
@@ -204,8 +211,8 @@ export class Media {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"left\" | \"right\"",
-        "resolved": "\"left\" | \"right\"",
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
         "references": {}
       },
       "required": false,
@@ -218,14 +225,14 @@ export class Media {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"left\", \"right\"]",
+            "text": "[\"left\", \"center\", \"right\"]",
             "name": "uiEnum"
           }],
         "text": ""
       },
       "attribute": "image-pos",
       "reflect": false,
-      "defaultValue": "\"left\""
+      "defaultValue": "\"center\""
     },
     "imageMobilePos": {
       "type": "string",
@@ -245,7 +252,7 @@ export class Media {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"top\", \"bottom\" ]",
+            "text": "[\"top\", \"bottom\"]",
             "name": "uiEnum"
           }],
         "text": ""
@@ -354,6 +361,38 @@ export class Media {
       "attribute": "button-new-tab",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "padding": {
+      "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": "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": ""
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "\"xx-large\""
     }
   }; }
 }

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -35,16 +35,14 @@ export function NameFieldsView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName)
-      ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
-      }
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
+    }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName)
-      ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
-      }
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+    }
       : [])))));
 }

package/dist/collection/components/sqm-password-field/sqm-password-field-view.js

@@ -32,11 +32,10 @@ export function PortalResetPasswordView(props) {
         if (!value) {
           return "Cannot be empty";
         }
-      } }, (((_a = states.validationErrors) === null || _a === void 0 ? void 0 : _a.password)
-      ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_b = states.validationErrors) === null || _b === void 0 ? void 0 : _b.password) || "Cannot be empty",
-      }
+      } }, (((_a = states.validationErrors) === null || _a === void 0 ? void 0 : _a.password) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_b = states.validationErrors) === null || _b === void 0 ? void 0 : _b.password) || "Cannot be empty",
+    }
       : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
     states.dynamicValidation));
 }

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-view.js

@@ -27,10 +27,9 @@ export function PortalProfileView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode)
-    ? intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
-      type: "region",
-    })
+  const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
+    type: "region",
+  })
     : "";
   return (h(PortalContainerView, Object.assign({}, {
     direction: "row",
@@ -55,13 +54,11 @@ export function PortalProfileView(props) {
         h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_c = states.user) === null || _c === void 0 ? void 0 : _c.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, ((errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
           ? { class: "ErrorStyles", helpText: "Cannot be empty" }
           : []), { id: "firstName", name: "firstName", error: (errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
-            ? errors === null || errors === void 0 ? void 0 : errors.firstName.message
-            : undefined })),
+            ? errors === null || errors === void 0 ? void 0 : errors.firstName.message : undefined })),
         h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_d = states.user) === null || _d === void 0 ? void 0 : _d.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, ((errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
           ? { class: "ErrorStyles", helpText: "Cannot be empty" }
           : []), { error: (errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
-            ? errors === null || errors === void 0 ? void 0 : errors.lastName.message
-            : undefined }))),
+            ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
       h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label", disabled: true }),
       states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label", disabled: true })),
       h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -53,21 +53,19 @@ export function PortalRegisterView(props) {
           if (!value.includes("@")) {
             return "Must be a valid email address";
           }
-        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email)
-        ? {
-          class: sheet.classes.ErrorStyle,
-          helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-            "Cannot be empty",
-        }
+        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          "Cannot be empty",
+      }
         : [])))),
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword)
-        ? {
-          class: sheet.classes.ErrorStyle,
-          helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
-            "Cannot be empty",
-        }
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
+          "Cannot be empty",
+      }
         : [])))),
       content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },

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

@@ -5,7 +5,7 @@ export default {
 const media = (slot) => {
   return (h("sqm-portal-container", { gap: "large", slot: slot },
     "Get rewarded when your friend uses Klip",
-    h("sqm-media", { "image-url": "https://i.imgur.com/L3aRMde.png", "min-height": "0" })));
+    h("sqm-image", { "image-url": "https://i.imgur.com/IqB7GeS.png" })));
 };
 const sharebutton = (slot) => {
   return (h("sqm-portal-container", { gap: "large", slot: slot },

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

@@ -23,6 +23,21 @@ export class TimelineReward {
       TimelineReward: {
         color: "var(--sl-color-neutral-900)",
         lineHeight: "var(--sl-line-height-dense)",
+        "& .container": {
+          display: "flex",
+        },
+        "& .line": {
+          color: "transparent",
+          userSelect: "none",
+          background: "var(--sl-color-primary-300)",
+          width: "4px",
+          borderRadius: "4px",
+          margin: "-2px",
+          position: "relative",
+          left: "12px",
+          transform: "scaleY(0.95)",
+          top: "16px",
+        },
         "& .step": {
           display: "flex",
           minHeight: "100px",
@@ -45,13 +60,7 @@ export class TimelineReward {
         },
         "& .description": {
           fontSize: "var(--sl-font-size-large)",
-        },
-        "& .line": {
-          height: "50px",
-          position: "relative",
-          left: "10px",
-          top: "-32px",
-          color: "var(--sl-color-primary-300)",
+          marginBottom: "var(--sl-spacing-xx-large)",
         },
       },
     };
@@ -67,16 +76,18 @@ export class TimelineReward {
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("div", { class: "step" },
-        this.icon === "gift" && (h("div", { class: "icon" },
-          h(Gift, null))),
-        this.icon === "circle" && (h("div", { class: "icon" },
-          h(Circle, null))),
-        h("div", null,
+      h("div", { class: "container" },
+        this.line && h("div", { class: "line" }, "."),
+        h("div", { class: "step" },
+          this.icon === "gift" && (h("div", { class: "icon" },
+            h(Gift, null))),
+          this.icon === "circle" && (h("div", { class: "icon" },
+            h(Circle, null))),
           h("div", null,
-            h("span", { class: "reward" }, this.reward),
-            h("span", { class: "unit" }, this.unit)),
-          h("div", { class: "description" }, this.desc)))));
+            h("div", null,
+              h("span", { class: "reward" }, this.reward),
+              h("span", { class: "unit" }, this.unit)),
+            h("div", { class: "description" }, this.desc))))));
   }
   static get is() { return "sqm-timeline-entry"; }
   static get encapsulation() { return "shadow"; }
@@ -141,6 +152,26 @@ export class TimelineReward {
       "attribute": "desc",
       "reflect": false
     },
+    "line": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      },
+      "attribute": "line",
+      "reflect": false
+    },
     "icon": {
       "type": "string",
       "mutable": false,

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

@@ -19,7 +19,12 @@ export class Timeline {
   render() {
     //@ts-ignore
     const rewards = useChildElements();
-    rewards.forEach((reward) => (reward.icon = this.icon));
+    rewards.forEach((reward, idx) => {
+      if (rewards.length > 1 && idx != rewards.length - 1) {
+        reward.line = true;
+      }
+      reward.icon = this.icon;
+    });
     const vanillaStyle = `
 		:host{
 			display: block;   
@@ -28,7 +33,7 @@ export class Timeline {
 		// ::slotted(*:not(:only-child):not(:last-child)) {
 		// 	margin-bottom: var(--sl-spacing-xx-large);
 		// }
-		
+
 		// ::slotted(*:not(:only-child):not(:last-child))::before {
 		// 	display: block;
 		// 	content: "";
@@ -52,20 +57,20 @@ export class Timeline {
 
 
     // ZH: Temporary Patch fix
-    ::slotted(*:not(:first-child))::before {
-			display: block;
-			position: relative;
-			content: "";
-			background: var(--sl-color-primary-300);
-			min-height: 150px;
-			max-height: 300px;
-			width: 4px;
-			top: 12px;
-			left: 10px;
-			margin-top: -85px;
-			margin-bottom: 8px;
-			border-radius: 4px;
-		}
+    // ::slotted(*:not(:first-child))::before {
+	// 		display: block;
+	// 		position: relative;
+	// 		content: "";
+	// 		background: var(--sl-color-primary-300);
+	// 		min-height: 150px;
+	// 		max-height: 300px;
+	// 		width: 4px;
+	// 		top: 12px;
+	// 		left: 10px;
+	// 		margin-top: -85px;
+	// 		margin-bottom: 8px;
+	// 		border-radius: 4px;
+	// 	}
 	`;
     return (h("div", null,
       h("style", { type: "text/css" }, vanillaStyle),