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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-633d1fb7.js');
+const global = require('./global-13123238.js');
 const useCallback = require('./use-callback-e754042f.js');
 const index_module = require('./index.module-f972f103.js');
 require('./extends-08099afd.js');
@@ -16,10 +16,10 @@ const reRender = require('./re-render-1ef744c7.js');
 const useChildElements = require('./useChildElements-3ce892db.js');
 require('./luxon-59ca7d19.js');
 const utils = require('./utils-01dbfd4a.js');
-require('./sqm-text-span-view-f101dedf.js');
-require('./sqm-portal-container-view-d101032e.js');
-const ShadowViewAddon = require('./ShadowViewAddon-79dd6c07.js');
-require('./sqm-portal-section-view-186a5f7e.js');
+require('./sqm-text-span-view-c54af22c.js');
+require('./sqm-portal-container-view-5ea913a8.js');
+const ShadowViewAddon = require('./ShadowViewAddon-60ca6e6c.js');
+require('./sqm-portal-section-view-f3c8475a.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -35,7 +35,8 @@ const BigStat = class {
   render() {
     var _a;
     const { props, label } = index_module.jn() ? ShadowViewAddon.useDemoBigStat(this) : ShadowViewAddon.useBigStat(this);
-    const hasLabel = (_a = useChildElements.useChildElements()) === null || _a === void 0 ? void 0 : _a.length;
+    const host = index_module.P();
+    const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = index.h("slot", { name: "label" }, hasLabel ? index.h("slot", null) : label);
     return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
   }
@@ -416,6 +417,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",
@@ -446,10 +448,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",
@@ -461,7 +470,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%",
         },
@@ -5435,57 +5443,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 = JSS.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 = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
     :host{
       display: block;   
     }
   `;
+function ReferralCardView(props) {
   return (index.h("div", null,
     index.h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     index.h("div", { class: sheet.classes.Container },
-      index.h("div", { class: "left" }, props.slots.left),
-      index.h("div", { class: "right" }, props.slots.right))));
+      index.h("div", { class: "left", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.left),
+      index.h("div", { class: "right", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.right))));
 }
 
 const ReferralCard = class {
@@ -5534,7 +5544,7 @@ function useReferralIframe(props) {
   };
 }
 
-const style = {
+const style$1 = {
   IconStyle: {
     display: "block",
     position: "absolute",
@@ -5553,21 +5563,21 @@ const style = {
     margin: "30px",
   },
 };
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function RequiredPropsError({ missingProps }) {
   if (!missingProps)
     return false;
   const host = index_module.P();
   const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
-  return (index.h("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
+  return (index.h("sl-alert", { type: "danger", open: true, class: sheet$1.classes.Alert },
+    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("div", { slot: "icon", class: sheet$1.classes.IconStyle },
       index.h("sl-icon", { name: "exclamation-octagon" })),
-    index.h("div", { class: sheet.classes.DivStyle },
-      index.h("h2", { class: sheet.classes.Heading }, "There was a problem loading this page"),
+    index.h("div", { class: sheet$1.classes.DivStyle },
+      index.h("h2", { class: sheet$1.classes.Heading }, "There was a problem loading this page"),
       index.h("p", null, "There was a technical problem that prevented this page from loading. Please contact us with the link to this page.")),
-    index.h("details", { class: sheet.classes.Details },
+    index.h("details", { class: sheet$1.classes.Details },
       index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
         detailsOpen ? "Less" : "More",
         " details"),
@@ -6489,9 +6499,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
      */
@@ -6521,7 +6531,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;
     /**
@@ -6708,7 +6720,17 @@ const Scroll = class {
   constructor(hostRef) {
     index.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";
     stencilHooks_module.h$1(this);
   }
@@ -6739,12 +6761,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%;
 			}
 		}
@@ -6753,9 +6776,9 @@ const Scroll = class {
     let classStack = "";
     if (this.outline)
       classStack += "outline ";
-    if (this.mobileFriendly)
+    if (this.mobile)
       classStack += "mobile ";
-    return (index.h("div", { class: sheet.classes.Button }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), index.h("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 && (index.h("sl-icon", { slot: this.iconSlot, name: this.iconName })), this.buttonText, index.h("slot", null))));
+    return (index.h("div", { class: sheet.classes.Button }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), index.h("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) && (index.h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, index.h("slot", null))));
   }
 };
 
@@ -6776,15 +6799,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;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -6838,7 +6861,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,
@@ -6864,13 +6887,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;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -6887,14 +6910,14 @@ function useDemoShareCode(props) {
   const shareString = "SHARECODE001";
   return cjs.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 });
 }
@@ -6908,7 +6931,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
      *
@@ -6931,7 +6954,7 @@ function useDemoShareLink(props) {
   const shareString = "https://www.example.com/sharelink/abc";
   return cjs.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
@@ -6943,6 +6966,30 @@ function useDemoShareLink(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const StatContainer = class {
+  constructor(hostRef) {
+    index.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";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(ShadowViewAddon.StatContainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
 const TableCell = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -7040,6 +7087,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;
@@ -7154,24 +7203,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 (index.h("div", null, index.h("style", { type: "text/css" }, vanillaStyle), index.h("slot", null)));
   }
@@ -7185,14 +7216,85 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("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 = JSS.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 (index.h("div", { class: sheet$2.classes.TimelineReward },
+    index.h("style", { type: "text/css" },
+      styleString$2,
+      vanillaStyle$1),
+    index.h("div", { class: "container" },
+      index.h("div", { class: "line" }, "/"),
+      index.h("div", { class: "step" },
+        timeline_icon === "gift" && (index.h("div", { class: "icon" },
+          index.h(Gift, null))),
+        timeline_icon === "circle" && (index.h("div", { class: "icon" },
+          index.h(Circle, null))),
+        index.h("div", null,
+          index.h("div", null,
+            index.h("span", { class: "reward" }, props.reward),
+            index.h("span", { class: "unit" }, props.unit)),
+          index.h("div", { class: "description" }, props.desc))))));
+}
+
 const TimelineReward = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    //   @State() line: boolean = false;
-    //   @Method() async setLine(value: boolean) {
-    //     this.line = value;
-    //   }
     this.iconState = "gift";
     stencilHooks_module.h$1(this);
   }
@@ -7204,66 +7306,7 @@ const TimelineReward = class {
     reRender.useRequestRerender([this.reward]);
     return index.h(TimelineEntryView, Object.assign({}, utils.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 = JSS.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 (index.h("div", { class: sheet.classes.TimelineReward }, index.h("style", { type: "text/css" }, styleString, vanillaStyle), index.h("div", { class: "container" }, index.h("div", { class: "line" }, "/"), index.h("div", { class: "step" }, timeline_icon === "gift" && (index.h("div", { class: "icon" }, index.h(Gift, null))), timeline_icon === "circle" && (index.h("div", { class: "icon" }, index.h(Circle, null))), index.h("div", null, index.h("div", null, index.h("span", { class: "reward" }, props.reward), index.h("span", { class: "unit" }, props.unit)), index.h("div", { class: "description" }, props.desc))))));
-}
+};
 
 function UserNameView(props) {
   return index.h(index.Host, null, props.loading ? props.loadingText : props.username);
@@ -7346,6 +7389,7 @@ exports.sqm_scroll = Scroll;
 exports.sqm_share_button = ShareButton;
 exports.sqm_share_code = ShareCode;
 exports.sqm_share_link = ShareLink;
+exports.sqm_stat_container = StatContainer;
 exports.sqm_table_cell = TableCell;
 exports.sqm_table_row = TableRow;
 exports.sqm_task_card = TaskCard;

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

@@ -7,8 +7,8 @@ const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./extends-08099afd.js');
 const JSS = require('./JSS-c65a40f1.js');
 const utils = require('./utils-01dbfd4a.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-d101032e.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5ea913a8.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-f3c8475a.js');
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
@@ -30,6 +30,7 @@ const HeroImage = class {
 };
 
 function ImageView(props) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",

package/dist/cjs/{sqm-hero-view-a13795c0.js → sqm-hero-view-3b0d45d0.js}

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

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

@@ -8,7 +8,7 @@ require('./use-callback-e754042f.js');
 require('./extends-08099afd.js');
 require('./JSS-c65a40f1.js');
 const utils = require('./utils-01dbfd4a.js');
-const sqmHeroView = require('./sqm-hero-view-a13795c0.js');
+const sqmHeroView = require('./sqm-hero-view-3b0d45d0.js');
 
 const Hero = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-633d1fb7.js');
+const global = require('./global-13123238.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-f972f103.js');
 require('./extends-08099afd.js');

package/dist/cjs/{sqm-portal-container-view-d101032e.js → sqm-portal-container-view-5ea913a8.js}

@@ -13,8 +13,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/cjs/{sqm-portal-email-verification-view-c32a55d6.js → sqm-portal-email-verification-view-535ae80c.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-633d1fb7.js');
+const global = require('./global-13123238.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
-const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
+const sqmTextSpanView = require('./sqm-text-span-view-c54af22c.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

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

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-633d1fb7.js');
+require('./global-13123238.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-f972f103.js');
 require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./JSS-c65a40f1.js');
-require('./sqm-text-span-view-f101dedf.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-c32a55d6.js');
+require('./sqm-text-span-view-c54af22c.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-535ae80c.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;