@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

package/dist/esm/{sqm-big-stat_30.entry.js → sqm-big-stat_31.entry.js}

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h, e as useEffect, k as useState, f as useRef, y, b as browser, u as useReducer } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import { u as useCallback } from './use-callback-7e0bfd3b.js';
-import { j as jn, d as dist, i as ie, b as sn, q as qe, M, r as rn, c as dn, g as $e, E as Ee, P, D as De, H as He, l as ln, R as Rn, A as An } from './index.module-aac201f3.js';
+import { j as jn, P, d as dist, i as ie, b as sn, q as qe, M, r as rn, c as dn, g as $e, E as Ee, D as De, H as He, l as ln, R as Rn, A as An } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -12,10 +12,10 @@ import { a as useRequestRerender } from './re-render-544e9c59.js';
 import { u as useChildElements } from './useChildElements-db935587.js';
 import './luxon-f44215d9.js';
 import { g as getProps, a as getMissingProps } from './utils-1d345130.js';
-import './sqm-text-span-view-7e61c95c.js';
-import './sqm-portal-container-view-dea0cdcc.js';
-import { c as useDemoBigStat, G as useBigStat, B as BigStatView, D as autoColorScaleCss, C as CardFeedView, E as EditProfileView, H as withShadowView, L as LeaderboardView, d as PortalChangePasswordView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, I as demoRewardExchange, h as RewardExchangeView, J as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './ShadowViewAddon-9c382e30.js';
-import './sqm-portal-section-view-88a80af9.js';
+import './sqm-text-span-view-c8793d61.js';
+import './sqm-portal-container-view-46929235.js';
+import { c as useDemoBigStat, H as useBigStat, B as BigStatView, F as autoColorScaleCss, D as CardFeedView, E as EditProfileView, I as withShadowView, L as LeaderboardView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, J as demoRewardExchange, i as RewardExchangeView, K as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-3347acdb.js';
+import './sqm-portal-section-view-61dbb8a9.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -31,7 +31,8 @@ const BigStat = class {
   render() {
     var _a;
     const { props, label } = jn() ? useDemoBigStat(this) : useBigStat(this);
-    const hasLabel = (_a = useChildElements()) === null || _a === void 0 ? void 0 : _a.length;
+    const host = P();
+    const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = h$1("slot", { name: "label" }, hasLabel ? h$1("slot", null) : label);
     return h$1(BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
   }
@@ -412,6 +413,7 @@ EditProfile.style = sqmEditProfileCss;
 function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       position: "relative",
@@ -442,10 +444,17 @@ function HeroImageView(props, children) {
     },
     Overlay: {
       zIndex: "1",
-      padding: "var(--sl-spacing-" + props.paddingText + ")",
+      padding: "calc(var(--sl-spacing-" +
+        props.paddingText +
+        ") + var(--sl-spacing-" +
+        props.paddingImage +
+        "))",
       textAlign: "center",
       color: props.textColor || "var(--sl-color-neutral-0)",
       lineHeight: "var(--sl-line-height-dense)",
+      "@media (max-width: 599px)": {
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
+      },
     },
     Column: {
       display: "flex",
@@ -457,7 +466,6 @@ function HeroImageView(props, children) {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
-        // margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
           width: "100%",
         },
@@ -5431,57 +5439,59 @@ const ProgramMenu = class {
   }
 };
 
-function ReferralCardView(props) {
-  const style = {
-    Container: {
-      display: "flex",
-      color: "var(--sl-color-neutral-900)",
-      background: "var(--sl-color-neutral-0)",
-      "& .left": {
-        boxSizing: "border-box",
-        width: "50%",
-        padding: "var(--sl-spacing-large)",
-        paddingRight: "var(--sl-spacing-medium)",
-        alignSelf: props.verticalAlignment,
-        "@media (max-width: 499px)": {
-          width: "100%",
-          padding: "0",
-          marginBottom: "var(--sl-spacing-xx-large)",
-        },
-      },
-      "& .right": {
-        boxSizing: "border-box",
-        width: "50%",
-        padding: "var(--sl-spacing-large)",
-        paddingLeft: "var(--sl-spacing-medium)",
-        alignSelf: props.verticalAlignment,
-        "@media (max-width: 499px)": {
-          width: "100%",
-          padding: "0",
-        },
+const style = {
+  Container: {
+    display: "flex",
+    color: "var(--sl-color-neutral-900)",
+    background: "var(--sl-color-neutral-0)",
+    "& .left": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingRight: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-xx-large)",
       },
-      border: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "var(--sl-border-radius-large)",
+    },
+    "& .right": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingLeft: "var(--sl-spacing-medium)",
       "@media (max-width: 499px)": {
-        flexDirection: "column",
-        border: "none",
+        width: "100%",
+        padding: "0",
       },
     },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
+    "@media (max-width: 499px)": {
+      flexDirection: "column",
+      border: "none",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
     :host{
       display: block;   
     }
   `;
+function ReferralCardView(props) {
   return (h$1("div", null,
     h$1("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h$1("div", { class: sheet.classes.Container },
-      h$1("div", { class: "left" }, props.slots.left),
-      h$1("div", { class: "right" }, props.slots.right))));
+      h$1("div", { class: "left", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.left),
+      h$1("div", { class: "right", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.right))));
 }
 
 const ReferralCard = class {
@@ -5530,7 +5540,7 @@ function useReferralIframe(props) {
   };
 }
 
-const style = {
+const style$1 = {
   IconStyle: {
     display: "block",
     position: "absolute",
@@ -5549,21 +5559,21 @@ const style = {
     margin: "30px",
   },
 };
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function RequiredPropsError({ missingProps }) {
   if (!missingProps)
     return false;
   const host = P();
   const [detailsOpen, setDetailsOpen] = useState(false);
-  return (h$1("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
-    h$1("style", { type: "text/css" }, styleString),
-    h$1("div", { slot: "icon", class: sheet.classes.IconStyle },
+  return (h$1("sl-alert", { type: "danger", open: true, class: sheet$1.classes.Alert },
+    h$1("style", { type: "text/css" }, styleString$1),
+    h$1("div", { slot: "icon", class: sheet$1.classes.IconStyle },
       h$1("sl-icon", { name: "exclamation-octagon" })),
-    h$1("div", { class: sheet.classes.DivStyle },
-      h$1("h2", { class: sheet.classes.Heading }, "There was a problem loading this page"),
+    h$1("div", { class: sheet$1.classes.DivStyle },
+      h$1("h2", { class: sheet$1.classes.Heading }, "There was a problem loading this page"),
       h$1("p", null, "There was a technical problem that prevented this page from loading. Please contact us with the link to this page.")),
-    h$1("details", { class: sheet.classes.Details },
+    h$1("details", { class: sheet$1.classes.Details },
       h$1("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
         detailsOpen ? "Less" : "More",
         " details"),
@@ -6485,9 +6495,9 @@ const SqmRewardExchangeList = class {
     /**
      * Shown when a user copies a fuel tank code
      *
-     * @uiName Tool Tip Text
+     * @uiName Tooltip Text
      */
-    this.tooltiptext = "Copied";
+    this.tooltipText = "Copied";
     /**
      * @uiName Done Text
      */
@@ -6517,7 +6527,9 @@ const SqmRewardExchangeList = class {
      */
     this.promoCode = "Promo Code";
     /**
-     * @undocumented Number of Skeleton Cards
+     * Set the number of placeholder cards to be shown in loading state.
+     *
+     * @undocumented Loading Cards
      */
     this.skeletonCardNum = 8;
     /**
@@ -6704,7 +6716,17 @@ const Scroll = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
+     */
     this.buttonType = "default";
+    /**
+     * @uiName Scroll Animation Style
+     * @uiType string
+     * @uiEnum ["smooth", "auto"]
+     */
     this.scrollAnimation = "smooth";
     h(this);
   }
@@ -6735,12 +6757,13 @@ const Scroll = class {
     const styleString = sheet.toString();
     const vanillaStyle = `
 		:host{
-			display: block;
+			display: contents;
 		}
-		${this.mobileFriendly &&
+		${this.mobile &&
       `
 		@media only screen and (max-width: 499px) {
 			:host {
+				display: block;
 				width: 100%;
 			}
 		}
@@ -6749,9 +6772,9 @@ const Scroll = class {
     let classStack = "";
     if (this.outline)
       classStack += "outline ";
-    if (this.mobileFriendly)
+    if (this.mobile)
       classStack += "mobile ";
-    return (h$1("div", { class: sheet.classes.Button }, h$1("style", { type: "text/css" }, vanillaStyle, styleString), h$1("sl-button", { type: this.outline ? "primary" : this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, href: this.href, circle: this.circle, name: this.name, target: this.target, download: this.download, disabled: this.disabled, caret: this.caret, loading: this.loading, class: classStack }, this.iconSlot && this.iconName && (h$1("sl-icon", { slot: this.iconSlot, name: this.iconName })), this.buttonText, h$1("slot", null))));
+    return (h$1("div", { class: sheet.classes.Button }, h$1("style", { type: "text/css" }, vanillaStyle, styleString), h$1("sl-button", { type: this.outline ? "primary" : this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack }, (this.iconSlot || this.iconName) && (h$1("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, h$1("slot", null))));
   }
 };
 
@@ -6772,15 +6795,15 @@ const ShareButton = class {
      * @uiEnum ["prefix", "suffix" ]
      * @uiEnumNames ["Prefix", "Suffix"]
      */
-    this.iconslot = "prefix";
+    this.iconSlot = "prefix";
     /**
      * @uiName Hide the icon
      */
-    this.hideicon = false;
+    this.hideIcon = false;
     /**
      * @uiName Hide the text
      */
-    this.hidetext = false;
+    this.hideText = false;
     h(this);
   }
   disconnectedCallback() { }
@@ -6834,7 +6857,7 @@ function useShareCode(props) {
     // Only if called from a user-initiated event
     navigator.clipboard.writeText(shareString);
     setOpen(true);
-    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    setTimeout(() => setOpen(false), props.tooltipLifespan);
     sendLoadEvent({
       eventMeta: {
         programId,
@@ -6860,13 +6883,13 @@ const ShareCode = class {
      *
      * @uiName Tooltip text
      */
-    this.tooltiptext = "Copied to Clipboard";
+    this.tooltipText = "Copied to Clipboard";
     /**
      * The number of milliseconds that the tooltip will appear for
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
+    this.tooltipLifespan = DEFAULT_TOOLTIP_LIFESPAN;
     h(this);
   }
   disconnectedCallback() { }
@@ -6883,14 +6906,14 @@ function useDemoShareCode(props) {
   const shareString = "SHARECODE001";
   return cjs({
     shareString,
-    tooltiptext: props.tooltiptext,
+    tooltipText: props.tooltipText,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
       // Only if called from a user-initiated event
       navigator.clipboard.writeText(shareString);
       setOpen(true);
-      setTimeout(() => setOpen(false), props.tooltiplifespan);
+      setTimeout(() => setOpen(false), props.tooltipLifespan);
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -6904,7 +6927,7 @@ const ShareLink = class {
      *
      * @uiName Tooltip text
      */
-    this.tooltiptext = "Copied to Clipboard";
+    this.tooltipText = "Copied to Clipboard";
     /**
      * The number of milliseconds that the tooltip will appear for
      *
@@ -6927,7 +6950,7 @@ function useDemoShareLink(props) {
   const shareString = "https://www.example.com/sharelink/abc";
   return cjs({
     shareString,
-    tooltiptext: props.tooltiptext,
+    tooltipText: props.tooltipText,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -6939,6 +6962,30 @@ function useDemoShareLink(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const StatContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Space between stats
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.space = "xxx-large";
+    /**
+     * @uiName Display
+     * @uiType string
+     * @uiEnum ["grid", "flex"]
+     */
+    this.display = "grid";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h$1(StatContainerView, Object.assign({}, getProps(this)), h$1("slot", null)));
+  }
+};
+
 const TableCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -7036,6 +7083,8 @@ const TaskCard = class {
      */
     this.showProgressBar = false;
     /**
+     * Sets the goal for progress to be completed. If repeatable is checked, repeatable goals will be increments of this.
+     *
      * @uiName Goal Completion Number
      */
     this.goal = 1;
@@ -7150,24 +7199,6 @@ const Timeline = class {
 		::slotted(*:not(:only-child):not(:last-child)) {
 			margin-bottom: var(--sl-spacing-xx-large);
 		}
-
-		// ::slotted(*:not(:only-child):not(:first-child)) * {
-		// 	background: yellow;
-		// }
-
-		// ::slotted(*:not(:only-child):not(:first-child))::before {
-		// 	display: block;
-		// 	content: "";
-		// 	position: relative;
-		// 	height: 65px;
-		// 	width: 4px;
-		// 	top: -15px;
-		// 	left: 50px;
-		// 	margin-top: -44px;
-		// 	margin-bottom: -15px;
-		// 	border-radius: 4px;
-		// 	background: red;
-		// }
 	`;
     return (h$1("div", null, h$1("style", { type: "text/css" }, vanillaStyle), h$1("slot", null)));
   }
@@ -7181,14 +7212,85 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
+const style$2 = {
+  TimelineReward: {
+    color: "var(--sl-color-neutral-900)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .container": {
+      display: "flex",
+    },
+    "& .line": {
+      display: "none",
+      color: "transparent",
+      userSelect: "none",
+      background: "var(--sl-color-primary-300)",
+      width: "4px",
+      borderRadius: "4px",
+      margin: "-2px",
+      position: "relative",
+      left: "12px",
+      top: "34px",
+    },
+    "& .step": {
+      display: "flex",
+    },
+    "& .icon": {
+      position: "relative",
+      top: "4px",
+      zIndex: "1",
+      color: "var(--sl-color-primary-300)",
+      marginRight: "var(--sl-spacing-large)",
+    },
+    "& .reward": {
+      marginRight: "var(--sl-spacing-x-small)",
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& .unit": {
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    "& .description": {
+      fontSize: "var(--sl-font-size-medium)",
+    },
+  },
+};
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+const vanillaStyle$1 = `
+	:host{
+		display: block; 
+	}
+
+	:host(:not(:last-of-type)) .line {
+		display: block; 
+	}
+	`;
+function TimelineEntryView(props) {
+  var _a;
+  const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
+  return (h$1("div", { class: sheet$2.classes.TimelineReward },
+    h$1("style", { type: "text/css" },
+      styleString$2,
+      vanillaStyle$1),
+    h$1("div", { class: "container" },
+      h$1("div", { class: "line" }, "/"),
+      h$1("div", { class: "step" },
+        timeline_icon === "gift" && (h$1("div", { class: "icon" },
+          h$1(Gift, null))),
+        timeline_icon === "circle" && (h$1("div", { class: "icon" },
+          h$1(Circle, null))),
+        h$1("div", null,
+          h$1("div", null,
+            h$1("span", { class: "reward" }, props.reward),
+            h$1("span", { class: "unit" }, props.unit)),
+          h$1("div", { class: "description" }, props.desc))))));
+}
+
 const TimelineReward = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
-    //   @State() line: boolean = false;
-    //   @Method() async setLine(value: boolean) {
-    //     this.line = value;
-    //   }
     this.iconState = "gift";
     h(this);
   }
@@ -7200,66 +7302,7 @@ const TimelineReward = class {
     useRequestRerender([this.reward]);
     return h$1(TimelineEntryView, Object.assign({}, getProps(this)));
   }
-};
-function TimelineEntryView(props) {
-  var _a;
-  const style = {
-    TimelineReward: {
-      color: "var(--sl-color-neutral-900)",
-      lineHeight: "var(--sl-line-height-dense)",
-      "& .container": {
-        display: "flex",
-      },
-      "& .line": {
-        display: "none",
-        color: "transparent",
-        userSelect: "none",
-        background: "var(--sl-color-primary-300)",
-        width: "4px",
-        borderRadius: "4px",
-        margin: "-2px",
-        position: "relative",
-        left: "12px",
-        top: "34px",
-      },
-      "& .step": {
-        display: "flex",
-      },
-      "& .icon": {
-        position: "relative",
-        top: "4px",
-        zIndex: "1",
-        color: "var(--sl-color-primary-300)",
-        marginRight: "var(--sl-spacing-large)",
-      },
-      "& .reward": {
-        marginRight: "var(--sl-spacing-x-small)",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .unit": {
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-small)",
-      },
-      "& .description": {
-        fontSize: "var(--sl-font-size-medium)",
-      },
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-	:host{
-		display: block;   
-	}
-
-	:host(:not(:last-child)) .line {
-		display: block;
-	}
-	`;
-  const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h$1("div", { class: sheet.classes.TimelineReward }, h$1("style", { type: "text/css" }, styleString, vanillaStyle), h$1("div", { class: "container" }, h$1("div", { class: "line" }, "/"), h$1("div", { class: "step" }, timeline_icon === "gift" && (h$1("div", { class: "icon" }, h$1(Gift, null))), timeline_icon === "circle" && (h$1("div", { class: "icon" }, h$1(Circle, null))), h$1("div", null, h$1("div", null, h$1("span", { class: "reward" }, props.reward), h$1("span", { class: "unit" }, props.unit)), h$1("div", { class: "description" }, props.desc))))));
-}
+};
 
 function UserNameView(props) {
   return h$1(Host, null, props.loading ? props.loadingText : props.username);
@@ -7318,4 +7361,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Leaderboard as sqm_leaderboard, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, Scroll as sqm_scroll, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, TableCell as sqm_table_cell, TableRow as sqm_table_row, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Leaderboard as sqm_leaderboard, NavigationMenu as sqm_navigation_menu, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, Scroll as sqm_scroll, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TableCell as sqm_table_cell, TableRow as sqm_table_row, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };

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

@@ -3,8 +3,8 @@ import { m as h$1 } from './stencil-hooks.module-acc8a613.js';
 import './extends-c31f1eff.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { g as getProps } from './utils-1d345130.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-dea0cdcc.js';
-import { P as PortalSectionView } from './sqm-portal-section-view-88a80af9.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-46929235.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-61dbb8a9.js';
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
@@ -26,6 +26,7 @@ const HeroImage = class {
 };
 
 function ImageView(props) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",

package/dist/esm/{sqm-hero-view-5ea17052.js → sqm-hero-view-8e70916e.js}

@@ -70,6 +70,7 @@ function HeroView(props) {
       return "5%";
     }
   };
+  // Dependent on props, not feasiable to move out
   const style = {
     TwoColumnContainer: {
       display: "flex",

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

@@ -4,7 +4,7 @@ import './use-callback-7e0bfd3b.js';
 import './extends-c31f1eff.js';
 import './JSS-96eeab98.js';
 import { g as getProps } from './utils-1d345130.js';
-import { H as HeroView } from './sqm-hero-view-5ea17052.js';
+import { H as HeroView } from './sqm-hero-view-8e70916e.js';
 
 const Hero = class {
   constructor(hostRef) {

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import './use-callback-7e0bfd3b.js';
 import { d as dist, M, i as ie, b as sn, j as jn } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';

package/dist/esm/{sqm-portal-container-view-dea0cdcc.js → sqm-portal-container-view-46929235.js}

@@ -11,8 +11,9 @@ function PortalContainerView(props, children) {
         : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
-      maxWidth: props.maxWidth ? props.maxWidth : "",
+      maxWidth: props.maxWidth,
       margin: props.center && "auto",
+      justifyContent: props.justifyContent,
     },
   };
   const vanillaStyle = `

package/dist/esm/{sqm-portal-email-verification-view-86e3ff2e.js → sqm-portal-email-verification-view-1d7eca0a.js}

@@ -1,8 +1,8 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { i as intl } from './global-9bff4920.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+import { T as TextSpanView } from './sqm-text-span-view-c8793d61.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/sqm-portal-email-verification.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { k as useState, e as useEffect, m as h } from './stencil-hooks.module-acc8a613.js';
-import './global-7d4eb5e5.js';
+import './global-9bff4920.js';
 import './use-callback-7e0bfd3b.js';
 import { n as nn, i as ie, j as jn } from './index.module-aac201f3.js';
 import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './JSS-96eeab98.js';
-import './sqm-text-span-view-7e61c95c.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-86e3ff2e.js';
+import './sqm-text-span-view-c8793d61.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-1d7eca0a.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;