@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

package/dist/esm/sqm-card-feed-view-cdd1f818.js

@@ -0,0 +1,367 @@
+import { h } from './index-17b4da69.js';
+import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+
+const DEFAULT_MAX_COL_WIDTH = 500;
+const DEFAULT_COLS = "auto";
+const DEFAULT_DEBOUNCE_MS = 300;
+const DEFAULT_GAP_PX = 24;
+const COL_COUNT_CSS_VAR_NAME = `--_masonry-layout-col-count`;
+const GAP_CSS_VAR_NAME = `--_masonry-layout-gap`;
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+const ELEMENT_NODE_TYPE = 1;
+const DEBOUNCE_MAP = new Map();
+/**
+ * Returns a number attribute from an element.
+ * @param $elem
+ * @param name
+ * @param defaultValue
+ */
+function getNumberAttribute($elem, name, defaultValue) {
+    const value = parseFloat($elem.getAttribute(name) || "");
+    return isNaN(value) ? defaultValue : value;
+}
+/**
+ * Returns the amount of cols that the masonry grid should have.
+ * @param totalWidth
+ * @param cols
+ * @param maxColWidth
+ */
+function getColCount(totalWidth, cols, maxColWidth) {
+    return isNaN(cols)
+        ? Math.max(1, Math.ceil(totalWidth / maxColWidth))
+        : cols;
+}
+/**
+ * Debounces a function.
+ * @param cb
+ * @param ms
+ * @param id
+ */
+function debounce(cb, ms, id) {
+    const existingTimeout = DEBOUNCE_MAP.get(id);
+    if (existingTimeout != null)
+        window.clearTimeout(existingTimeout);
+    DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
+}
+/**
+ * Returns the index of the column with the smallest height.
+ * @param colHeights
+ */
+function findSmallestColIndex(colHeights) {
+    let smallestIndex = 0;
+    let smallestHeight = Infinity;
+    colHeights.forEach((height, i) => {
+        if (height < smallestHeight) {
+            smallestHeight = height;
+            smallestIndex = i;
+        }
+    });
+    return smallestIndex;
+}
+
+/**
+ * Template for the masonry layout.
+ * Max width of each column is computed as the width in percentage of
+ * the column minus the total with of the gaps divided between each column.
+ */
+const $template = document.createElement("template");
+$template.innerHTML = `
+  <style>
+    :host {
+      display: flex;
+      align-items: flex-start;
+      justify-content: stretch;
+    }
+
+    .column {
+	  max-width: calc((100% / var(${COL_COUNT_CSS_VAR_NAME}, 1) - ((var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px) * (var(${COL_COUNT_CSS_VAR_NAME}, 1) - 1) / var(${COL_COUNT_CSS_VAR_NAME}, 1)))));
+	  width: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .column:not(:last-child) {
+      margin-right: var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px);
+    }
+
+    .column ::slotted(*) {
+      margin-bottom: var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px);
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    /* Hide the items that has not yet found the correct slot */
+    #unset-items {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+  </style>
+  <div id="unset-items">
+    <slot></slot>
+  </div>
+`;
+// Use polyfill only in browsers that lack native Shadow DOM.
+window.ShadyCSS && window.ShadyCSS.prepareTemplateStyles($template, "masonry-layout");
+/**
+ * Masonry layout web component. It places the slotted elements in the optimal position based
+ * on the available vertical space, just like mason fitting stones in a wall.
+ * @example <masonry-layout><div class="item"></div><div class="item"></div></masonry-layout>
+ * @csspart column - Each column of the masonry layout.
+ * @csspart column-index - The specific column at the given index (eg. column-0 would target the first column and so on)
+ * @slot - Items that should be distributed in the layout.
+ */
+class MasonryLayout extends HTMLElement {
+    /**
+     * Attach the shadow DOM.
+     */
+    constructor() {
+        super();
+        // Unique debounce ID so different masonry layouts on one page won't affect eachother
+        this.debounceId = `layout_${Math.random()}`;
+        // Resize observer that layouts when necessary
+        this.ro = undefined;
+        // The current request animation frame callback
+        this.currentRequestAnimationFrameCallback = undefined;
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.appendChild($template.content.cloneNode(true));
+        this.onSlotChange = this.onSlotChange.bind(this);
+        this.onResize = this.onResize.bind(this);
+        this.layout = this.layout.bind(this);
+        this.$unsetElementsSlot = this.shadowRoot.querySelector("#unset-items > slot");
+    }
+    // The observed attributes.
+    // Whenever one of these changes we need to update the layout.
+    static get observedAttributes() {
+        return ["maxcolwidth", "gap", "cols"];
+    }
+    /**
+     * The maximum width of each column if cols are set to auto.
+     * @attr maxcolwidth
+     * @param v
+     */
+    set maxColWidth(v) {
+        this.setAttribute("maxcolwidth", v.toString());
+    }
+    get maxColWidth() {
+        return getNumberAttribute(this, "maxcolwidth", DEFAULT_MAX_COL_WIDTH);
+    }
+    /**
+     * The amount of columns.
+     * @attr cols
+     * @param v
+     */
+    set cols(v) {
+        this.setAttribute("cols", v.toString());
+    }
+    get cols() {
+        return getNumberAttribute(this, "cols", DEFAULT_COLS);
+    }
+    /**
+     * The gap in pixels between the columns.
+     * @attr gap
+     * @param v
+     */
+    set gap(v) {
+        this.setAttribute("gap", v.toString());
+    }
+    get gap() {
+        return getNumberAttribute(this, "gap", DEFAULT_GAP_PX);
+    }
+    /**
+     * The ms of debounce when the element resizes.
+     * @attr debounce
+     * @param v
+     */
+    set debounce(v) {
+        this.setAttribute("debounce", v.toString());
+    }
+    get debounce() {
+        return getNumberAttribute(this, "debounce", DEFAULT_DEBOUNCE_MS);
+    }
+    /**
+     * The column elements.
+     */
+    get $columns() {
+        return Array.from(this.shadowRoot.querySelectorAll(`.column`));
+    }
+    /**
+     * Hook up event listeners when added to the DOM.
+     */
+    connectedCallback() {
+        this.$unsetElementsSlot.addEventListener("slotchange", this.onSlotChange);
+        // Attach resize observer so we can relayout eachtime the size changes
+        if ("ResizeObserver" in window) {
+            this.ro = new ResizeObserver(this.onResize);
+            this.ro.observe(this);
+        }
+        else {
+            window.addEventListener("resize", this.onResize);
+        }
+    }
+    /**
+     * Remove event listeners when removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.$unsetElementsSlot.removeEventListener("slotchange", this.onSlotChange);
+        window.removeEventListener("resize", this.onResize);
+        if (this.ro != null) {
+            this.ro.unobserve(this);
+        }
+    }
+    /**
+     * Updates the layout when one of the observed attributes changes.
+     */
+    attributeChangedCallback(name) {
+        switch (name) {
+            case "gap":
+                this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);
+                break;
+        }
+        // Recalculate the layout
+        this.scheduleLayout();
+    }
+    /**
+     *
+     */
+    onSlotChange() {
+        // Grab unset elements
+        const $unsetElements = (this.$unsetElementsSlot.assignedNodes() || [])
+            .filter(node => node.nodeType === ELEMENT_NODE_TYPE);
+        // If there are more items not yet set layout straight awy to avoid the item being delayed in its render.
+        if ($unsetElements.length > 0) {
+            this.layout();
+        }
+    }
+    /**
+     * Each time the element resizes we need to schedule a layout
+     * if the amount available columns has has changed.
+     * @param entries
+     */
+    onResize(entries) {
+        // Grab the width of the element. If it isn't provided by the resize observer entry
+        // we compute it ourselves by looking at the offset width of the element.
+        const { width } = entries != null && Array.isArray(entries) && entries.length > 0
+            ? entries[0].contentRect : { width: this.offsetWidth };
+        // Get the amount of columns we should have
+        const colCount = getColCount(width, this.cols, this.maxColWidth);
+        // Compare the amount of columns we should have to the current amount of columns.
+        // Schedule a layout if they are no longer the same.
+        if (colCount !== this.$columns.length) {
+            this.scheduleLayout();
+        }
+    }
+    /**
+     * Render X amount of columns.
+     * @param colCount
+     */
+    renderCols(colCount) {
+        // Get the current columns
+        const $columns = this.$columns;
+        // If the amount of columns is correct we don't have to add new columns.
+        if ($columns.length === colCount) {
+            return;
+        }
+        // Remove all of the current columns
+        for (const $column of $columns) {
+            $column.parentNode && $column.parentNode.removeChild($column);
+        }
+        // Add some new columns
+        for (let i = 0; i < colCount; i++) {
+            // Create a column element
+            const $column = document.createElement(`div`);
+            $column.classList.add(`column`);
+            $column.setAttribute(`part`, `column column-${i}`);
+            // Add a slot with the name set to the index of the column
+            const $slot = document.createElement(`slot`);
+            $slot.setAttribute(`name`, i.toString());
+            // Append the slot to the column an the column to the shadow root.
+            $column.appendChild($slot);
+            this.shadowRoot.appendChild($column);
+        }
+        // Set the column count so we can compute the correct width of the columns
+        this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount.toString());
+        // Commit the changes for ShadyCSS
+        window.ShadyCSS && window.ShadyCSS.styleElement(this);
+    }
+    /**
+     * Schedules a layout.
+     * @param ms
+     */
+    scheduleLayout(ms = this.debounce) {
+        debounce(this.layout, ms, this.debounceId);
+    }
+    /**
+     * Layouts the elements.
+     */
+    layout() {
+        // Cancel the current animation frame callback
+        if (this.currentRequestAnimationFrameCallback != null) {
+            window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
+        }
+        // Layout in the next animationframe
+        this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+            // console.time("layout");
+            // Compute relevant values we are going to use for layouting the elements.
+            const gap = this.gap;
+            const $elements = Array.from(this.children)
+                .filter(node => node.nodeType === ELEMENT_NODE_TYPE);
+            const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);
+            // Have an array that keeps track of the highest col height.
+            const colHeights = Array(colCount).fill(0);
+            // Instead of interleaving reads and writes we create an array for all writes so we can batch them at once.
+            const writes = [];
+            // Go through all elements and figure out what column (aka slot) they should be put in.
+            // We only do reads in this for loop and postpone the writes
+            for (const $elem of $elements) {
+                // Read the height of the element
+                const height = $elem.getBoundingClientRect().height;
+                // Find the currently smallest column
+                let smallestColIndex = findSmallestColIndex(colHeights);
+                // Add the height of the item and the gap to the column heights.
+                // It is very important we add the gap since the more elements we have,
+                // the bigger the role the margins play when computing the actual height of the columns.
+                colHeights[smallestColIndex] += height + gap;
+                // Set the slot on the element to get the element to the correct column.
+                // Only do it if the slot has actually changed.
+                const newSlot = smallestColIndex.toString();
+                if ($elem.slot !== newSlot) {
+                    writes.push(() => ($elem.slot = newSlot));
+                }
+            }
+            // Batch all the writes at once
+            for (const write of writes) {
+                write();
+            }
+            // Render the columns
+            this.renderCols(colCount);
+            // Commit the changes for ShadyCSS
+            window.ShadyCSS && window.ShadyCSS.styleElement(this);
+            // console.timeEnd("layout");
+        });
+    }
+}
+customElements.define("masonry-layout", MasonryLayout);
+
+function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        //   display: "inline-block!important",
+        marginBottom: "24px",
+      },
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.Container }, children)));
+}
+
+export { CardFeedView as C };

package/dist/esm/sqm-card-feed.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
-import { C as CardFeedView } from './sqm-card-feed-view-81f93bc7.js';
+import { C as CardFeedView } from './sqm-card-feed-view-cdd1f818.js';
 
 const CardFeed = class {
   constructor(hostRef) {
@@ -13,11 +13,10 @@ const CardFeed = class {
      */
     this.width = 347;
     /**
-     * @uiName Horizontal Gap
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiName Column Gap
+     * @uiType number
      */
-    this.gap = "xx-large";
+    this.gap = 24;
     h(this);
   }
   disconnectedCallback() { }

package/dist/esm/{sqm-leaderboard-rank-view-cd1e8962.js → sqm-leaderboard-rank-view-95e6fb4f.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { _ as __assign } from './global-e0e25c22.js';
+import { _ as __assign } from './global-1c68ff6e.js';
 import { f as parse } from './index.module-eb50a8d2.js';
 
 var docCache = new Map();

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
-import { i as intl, c as createIntl } from './global-e0e25c22.js';
+import { i as intl, c as createIntl } from './global-1c68ff6e.js';
 import './use-callback-b38a1523.js';
 import { M, n as ne, c as cn, j } from './index.module-eb50a8d2.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-cd1e8962.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-95e6fb4f.js';
 
 const GET_RANK = gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {

package/dist/esm/{sqm-portal-email-verification-view-2af31979.js → sqm-portal-email-verification-view-71eb8adb.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-e0e25c22.js';
+import { i as intl } from './global-1c68ff6e.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-10353a39.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';

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

@@ -1,13 +1,13 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './global-e0e25c22.js';
+import './global-1c68ff6e.js';
 import './use-callback-b38a1523.js';
 import { i as an, n as ne, j } from './index.module-eb50a8d2.js';
 import './jss-preset-default.esm-71fae192.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './sqm-text-span-view-1781df94.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-2af31979.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-71eb8adb.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;
@@ -23,7 +23,8 @@ function usePortalEmailVerification(props) {
       return;
     setError("");
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email, urlParams, redirectPath };
     await request(variables);
   };
   useEffect(() => {
@@ -59,6 +60,12 @@ const PortalEmailVerification = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Email verification header text
      */

package/dist/esm/{sqm-portal-footer-view-60cd9ae5.js → sqm-portal-footer-view-5cb00c4e.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-e0e25c22.js';
+import { i as intl } from './global-1c68ff6e.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

package/dist/esm/sqm-portal-footer.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
-import './global-e0e25c22.js';
+import './global-1c68ff6e.js';
 import './use-callback-b38a1523.js';
 import './index.module-eb50a8d2.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
-import { a as PortalFooterView } from './sqm-portal-footer-view-60cd9ae5.js';
+import { a as PortalFooterView } from './sqm-portal-footer-view-5cb00c4e.js';
 
 const PortalFooter = class {
   constructor(hostRef) {

package/dist/esm/sqm-portal-forgot-password.entry.js

@@ -9,7 +9,7 @@ import './mixins-10353a39.js';
 import './sqm-text-span-view-1781df94.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
 
-function usePortalForgotPassword() {
+function usePortalForgotPassword(props) {
   var _a, _b, _c, _d;
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
@@ -23,7 +23,8 @@ function usePortalForgotPassword() {
       jsonpointer.set(formData, key, value);
     });
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email: formData.email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
     await request(variables);
   };
   useEffect(() => {
@@ -42,6 +43,7 @@ function usePortalForgotPassword() {
       loading,
       error: ((_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message) || error,
       success,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,
@@ -53,6 +55,12 @@ const PortalForgotPassword = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the password reset email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/resetPassword";
     /**
      * @uiName Email label
      */
@@ -61,15 +69,19 @@ const PortalForgotPassword = class {
      * @uiName Password reset button text
      */
     this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Routing path to login page
+     */
+    this.loginPath = "/login";
     h(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks } = j()
       ? usePortalForgotPasswordDemo(this)
-      : usePortalForgotPassword();
+      : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/login") }, "Sign In"))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push(states.loginPath) }, "Sign In"))),
       messageSlot: (h$1("slot", { name: "messageSlot" }, "Enter your email below to receive a password reset link.")),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,

package/dist/esm/{sqm-portal-profile-view-ba06e776.js → sqm-portal-profile-view-864dd5b5.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-e0e25c22.js';
+import { i as intl } from './global-1c68ff6e.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
 
@@ -12,12 +12,13 @@ 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 : "",
     },
   };
   const vanillaStyle = `
   :host{
     width: 100%;
-    display: "block";
+    display: block;
   }`;
   jss.setup(create());
   const sheet = jss.createStyleSheet(style);

package/dist/esm/sqm-portal-profile.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './global-e0e25c22.js';
+import './global-1c68ff6e.js';
 import './use-callback-b38a1523.js';
 import { d as dist, n as ne, c as cn, D as De, j } from './index.module-eb50a8d2.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { a as PortalProfileView } from './sqm-portal-profile-view-ba06e776.js';
+import { a as PortalProfileView } from './sqm-portal-profile-view-864dd5b5.js';
 import './sqm-text-span-view-1781df94.js';
 
 const GET_USER = dist.gql `

package/dist/esm/sqm-portal-reset-password.entry.js

@@ -41,7 +41,7 @@ function usePortalResetPassword(props) {
   };
   const failed = () => {
     mn.push({
-      pathname: "/",
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -89,9 +89,17 @@ const PortalResetPassword = class {
     registerInstance(this, hostRef);
     this.ignored = true;
     /**
+     * The page that users are redirected to when the password reset succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     /**
      * @uiName Show confirm password
      */

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

@@ -8,7 +8,7 @@ import './mixins-10353a39.js';
 import './sqm-text-span-view-1781df94.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 
-function usePortalVerifyEmail({ nextPage }) {
+function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = useState(false);
   const [disableContinue, setDisableContinue] = useState(true);
@@ -21,7 +21,7 @@ function usePortalVerifyEmail({ nextPage }) {
   urlParams.delete("oobCode");
   const failed = () => {
     return mn.push({
-      pathname: "/",
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -92,9 +92,17 @@ const PortalVerifyEmail = class {
     registerInstance(this, hostRef);
     this.ignored = true;
     /**
+     * The page that users are redirected to when the verification succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     h(this);
   }
   disconnectedCallback() { }

package/dist/esm/{sqm-program-explainer-step-view-7c0d5f71.js → sqm-program-explainer-step-view-e2b39225.js}

@@ -11,14 +11,14 @@ function ProgramExplainerStepView(props) {
       background: props.background,
       padding: "var(--sl-spacing-large)",
       paddingBottom: "var(--sl-spacing-xxx-large)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
         paddingBottom: "var(--sl-spacing-large)",
       },
     },
     Text: {
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         marginLeft: "var(--sl-spacing-large)",
       },
     },
@@ -28,14 +28,14 @@ function ProgramExplainerStepView(props) {
       fontWeight: "var(--sl-font-weight-bold)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-large)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         margin: "0",
       },
     },
     Description: {
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         marginTop: "var(--sl-spacing-x-small)",
       },
     },