@saasquatch/mint-components 1.6.3 → 1.6.4-1

package/dist/collection/components/sqm-divided-layout/DividedLayout.stories.js

@@ -5,20 +5,6 @@ import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view
 export default {
   title: "Components/Divided Layout",
 };
-const barProps = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
 const item1Props = {
   states: {
     active: false,
@@ -40,7 +26,7 @@ const item2Props = {
   },
 };
 const Sidebar = () => {
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
+  return (h(NavigationSidebarView, null,
     h(NavigationSidebarItemView, Object.assign({}, item1Props)),
     h(NavigationSidebarItemView, Object.assign({}, item2Props))));
 };

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -12,10 +12,6 @@ export function DividedLayoutView(props, children) {
   const style = {
     LayoutContainer: {
       display: "contents",
-      // "min-width": "320px",
-      // "& > ::slotted(*)": {
-      //   "min-width": "320px",
-      // },
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
         ...getBorder(),
@@ -28,8 +24,10 @@ export function DividedLayoutView(props, children) {
   const hostStyle = `
     display: flex;
     flex: 1;
+    box-sizing: border-box;
     flex-direction: ${props.direction};
     background-color: var(--sqm-content-background);
+    overflow-x: clip;
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"
     : ""}

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

@@ -37,7 +37,7 @@ const EditProfileView = (props) => {
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
     h("div", { class: "FormSection" },
       h("h2", { style: {
-          fontSize: "var(--sl-font-size-x-large",
+          fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",
         } }, text.editprofileheader),

package/dist/collection/components/sqm-empty/sqm-empty-view.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+  return (h("sqm-portal-container", { padding: "large", gap: "medium" },
     h("sqm-image", { "image-url": emptyStateImage }),
     h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },

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

@@ -4,7 +4,7 @@ import { EmptyStateView } from "./sqm-empty-view";
  * @uiName Empty State Content
  * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
  */
-export class HeroImage {
+export class Empty {
   render() {
     return (h(Host, { slot: "empty" },
       h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText })));

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

@@ -5,6 +5,8 @@ import { getProps } from "../../utils/utils";
 /**
  * @uiName Hero Layout
  * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
+ * @example Two Column Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
+ * @exampleGroup Layout
  */
 export class Hero {
   constructor() {

package/dist/collection/components/sqm-navigation-sidebar/NavigationSidebar.stories.js

@@ -39,7 +39,7 @@ export const DefaultNavigationSidebar = () => {
       path: "/",
     },
   };
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
+  return (h(NavigationSidebarView, null,
     h(NavigationSidebarItemView, Object.assign({}, item1Props)),
     h(NavigationSidebarItemView, Object.assign({}, item2Props))));
 };

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -1,31 +1,153 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { gap } from "../../global/mixins";
-const style = {
-  ItemsContainer: {
-    "min-width": "290px",
-    "max-width": "320px",
-    "box-sizing": "border-box",
-    padding: "20px 15px",
-    ...gap({ direction: "column", size: "4px" }),
-  },
-};
 const vanillaStyle = `
-  :host{    
-    width: 30vw;
-    min-width: min-content;
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+@keyframes slideIn {
+  0% {
+    left: -350px;
+  }
+  100% {
+    left: 0;
+  }
+} 
+
+@media screen and (min-width: 800px) {
+  :host {
+    max-width: 300px;
+  }
+  .toggler,
+  .hamburger {
+     user-select: none;
+     visibility:hidden;
+  }
+  .container{
+    position: sticky;
+    top: 0;
+  }
+  .menu-items {
+    min-width: 290px;
     max-width: 320px;
+    box-sizing: border-box;
+    padding: 0px 15px;
+  }
+  .menu-items > :not(:last-child): {
+    margin-bottom: 4px;
+  }
+}
+@media screen and (max-width: 799px) {
+  .toggler {
+    border: 2px solid #eee;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 5;
+  }
+
+  .container {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    width: 60px;
+    flex-direction: column;
+    z-index: 100;
+  }
+  .menu-items { 
+    display: none;
+    padding: 20px;
+    border-right: 1px solid #eaeaea;
+    padding-top: 60px;
+    background: white; 
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0px;
+    margin: 0;
+    animation: slideIn 500ms ease-in-out;
+  }
+
+  .toggler,
+  .hamburger {
+    visibility: visible !important;
+  }
+
+  .container {
+    display: flex;
+  }
+
+  .hamburger > .line {
+    visibility: visible !important;
+  }
+
+
+  .toggler,
+  .hamburger {
+    position: absolute;
+    padding: 20px 10px;
+  }
+
+  .toggler {
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+  }
+
+  .hamburger {
+    z-index: 10;
+    width: 75%;
+    height: 100%;
+  }
+
+  .toggler:checked ~ .menu-items {
+    display: block;
+  }
+
+  /***** Turn hamburger into an X *****/
+  .toggler:checked ~ .hamburger > .line:nth-child(1) {
+    opacity: 0;
+  }
+
+  .toggler:checked ~ .hamburger > .line:nth-child(2) {
+    transform: rotate(45deg) translate(0px, -0.5px);
+  }
+
+  .toggler:checked ~ .hamburger > .line:nth-child(3) {
+    transform: rotate(-45deg) translate(3px, -3.5px);
+  }
+
+  .toggler:checked ~ .hamburger > .line:nth-child(1),
+  .toggler:checked ~ .hamburger > .line:nth-child(2),
+  .toggler:checked ~ .hamburger > .line:nth-child(3) {
+    width: 75%;
+    border-bottom: 3px solid #444445;
+    margin: 0;
+  }
+
+  .hamburger > .line {
+    visibility:hidden;
+    z-index: 2;
+    height: 4px;
+    width: 100%;
+    margin-bottom: 3px;
+    border-bottom: 5px solid #444445;
   }
+}
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function NavigationSidebarView(
-// @ts-ignore - Stencil requires props (even if empty)
-props, children) {
-  return (h("div", null,
-    h("div", { class: sheet.classes.ItemsContainer },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      children)));
+export function NavigationSidebarView(props, children) {
+  return (h("div", { class: "container" },
+    h("style", null, vanillaStyle),
+    h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),
+    h("div", { class: "hamburger" },
+      h("div", { class: "line" }),
+      h("div", { class: "line" }),
+      h("div", { class: "line" })),
+    h("div", { class: "menu-items" }, children)));
 }

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -1,4 +1,6 @@
+import { useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { Component, h, State } from "@stencil/core";
 import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
 /**
@@ -12,7 +14,8 @@ export class NavigationSidebar {
   }
   disconnectedCallback() { }
   render() {
-    return (h(NavigationSidebarView, null,
+    const props = useNavigationSidebar();
+    return (h(NavigationSidebarView, Object.assign({}, props),
       h("slot", null)));
   }
   static get is() { return "sqm-navigation-sidebar"; }
@@ -21,3 +24,19 @@ export class NavigationSidebar {
     "ignored": {}
   }; }
 }
+function useNavigationSidebar() {
+  const location = useCurrentPage();
+  const programId = useProgramId();
+  const [checked, setChecked] = useState(false);
+  // Close hamburger menu after navigation
+  useEffect(() => {
+    setChecked(false);
+  }, [location.pathname, programId]);
+  function onClick(e) {
+    setChecked(e.target.checked);
+  }
+  return {
+    checked,
+    onClick,
+  };
+}

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

@@ -3,6 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
     Container: {
+      boxSizing: "border-box",
       display: props.display || "grid",
       flexWrap: "wrap",
       "grid-template-columns": props.direction === "row"

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-import { PortalContainerView } from "../sqm-portal-container/sqm-portal-container-view";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 import { intl } from "../../global/global";
 export function PortalProfileView(props) {
@@ -9,19 +8,45 @@ export function PortalProfileView(props) {
   const { text, formState } = states;
   const { errors, error } = formState;
   const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-xxx-large)",
+    },
     FormStyle: {
+      width: "100%",
+      minWidth: "700px",
       "& >*:not(:last-child)": {
         "margin-bottom": "32px",
       },
+      "@media screen and (max-width: 1100px)": {
+        minWidth: "100%",
+      },
     },
     Error: {
       "&::part(erroralert-base)": {
         "margin-bottom": "32px",
       },
     },
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "32px",
+      },
+    },
     NameInputStyle: {
-      "&:not(:last-child)": {
-        "margin-right": "var(--sl-spacing-medium)",
+      width: "50%",
+      "@media screen and (max-width: 860px)": {
+        width: "100%",
+        "margin-right": "0",
+      },
+    },
+    NameInputContainer: {
+      display: "flex",
+      gap: "32px",
+      width: "100%",
+      "@media screen and (max-width: 860px)": {
+        flexDirection: "column",
       },
     },
   };
@@ -31,26 +56,16 @@ export function PortalProfileView(props) {
     type: "region",
   })
     : "";
-  return (h(PortalContainerView, Object.assign({}, {
-    direction: "row",
-    padding: "xxx-large",
-    gap: "xxx-large",
-    minWidth: "600px",
-  }),
+  return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
     h(TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
     h(TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),
     h("form", { class: sheet.classes.FormStyle, onSubmit: callbacks.onSubmit },
-      states.success && (h("sqm-form-message", { exportparts: "success-icon" },
+      states.success && (h("sqm-form-message", { class: sheet.classes.Success, exportparts: "success-icon" },
         h("div", { part: "successalert-text" }, "Your profile has been successfully updated."))),
       error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, error))),
-      h(PortalContainerView, Object.assign({}, {
-        direction: "row",
-        padding: "none",
-        gap: "32px",
-        minWidth: "50%",
-      }),
+      h("div", { class: sheet.classes.NameInputContainer },
         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"

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

@@ -28,6 +28,11 @@ export function StatContainerView(props, children) {
       "& > ::slotted(*:last-child)": {
         "border-right": "none",
       },
+      "@media screen and (max-width: 430px)": {
+        "& > ::slotted(*)": {
+          borderRight: "none",
+        },
+      },
     },
     StatFrame: {
       display: "flex",

package/dist/collection/stories/NewPortal.stories.js

@@ -21,20 +21,6 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const barProps = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
 const item1Props = {
   states: {
     active: false,
@@ -56,7 +42,7 @@ const item2Props = {
   },
 };
 const Sidebar = () => {
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
+  return (h(NavigationSidebarView, null,
     h(NavigationSidebarItemView, Object.assign({}, item1Props)),
     h(NavigationSidebarItemView, Object.assign({}, item2Props))));
 };

package/dist/esm/{ShadowViewAddon-d4705dae.js → ShadowViewAddon-2b7579de.js}

@@ -1,16 +1,15 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { i as useState, b as browser, k as useMemo } from './stencil-hooks.module-eefa3570.js';
-import { i as intl } from './global-126fa55c.js';
-import { d as dist, O, N, a as dn, P as Pe, U, g as getEnvironmentSDK, x } from './index.module-14794b69.js';
+import { i as useState, b as browser, k as useMemo } from './stencil-hooks.module-203eab48.js';
+import { i as intl } from './global-09167b08.js';
+import { d as dist, O, N, a as dn, P as Pe, U, g as getEnvironmentSDK, x } from './index.module-48cc9ee0.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { u as useChildElements } from './useChildElements-d574b0ce.js';
-import { l as luxon } from './luxon-5a398612.js';
+import { u as useChildElements } from './useChildElements-11279a92.js';
+import { l as luxon } from './luxon-198ac0b0.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-2567b6c0.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-21bd84e0.js';
-import { P as PortalSectionView } from './sqm-portal-section-view-a991e019.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-2307476f.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -323,7 +322,7 @@ const EditProfileView = (props) => {
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
     h("div", { class: "FormSection" },
       h("h2", { style: {
-          fontSize: "var(--sl-font-size-x-large",
+          fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",
         } }, text.editprofileheader),
@@ -1435,6 +1434,11 @@ function StatContainerView(props, children) {
       "& > ::slotted(*:last-child)": {
         "border-right": "none",
       },
+      "@media screen and (max-width: 430px)": {
+        "& > ::slotted(*)": {
+          borderRight: "none",
+        },
+      },
     },
     StatFrame: {
       display: "flex",

package/dist/esm/{global-126fa55c.js → global-09167b08.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-eefa3570.js';
-import { s as src, m as memoize, V } from './index.module-14794b69.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-203eab48.js';
+import { s as src, m as memoize, V } from './index.module-48cc9ee0.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {

package/dist/esm/{index.module-14794b69.js → index.module-48cc9ee0.js}

@@ -1,5 +1,5 @@
-import { d as c, s, c as createCommonjsModule, a as commonjsGlobal, e as getDefaultExportFromCjs, u as useReducer, h, f as useEffect, i as useState, j as useRef, k as useMemo } from './stencil-hooks.module-eefa3570.js';
-import { u as useCallback } from './use-callback-684c8bb7.js';
+import { d as c, s, c as createCommonjsModule, a as commonjsGlobal, e as getDefaultExportFromCjs, u as useEffect, h, f as useReducer, i as useState, j as useRef, k as useMemo } from './stencil-hooks.module-203eab48.js';
+import { u as useCallback } from './use-callback-f03b0607.js';
 
 function e(e){this.message=e;}e.prototype=new Error,e.prototype.name="InvalidCharacterError";var r="undefined"!=typeof window&&window.atob&&window.atob.bind(window)||function(r){var t=String(r).replace(/=+$/,"");if(t.length%4==1)throw new e("'atob' failed: The string to be decoded is not correctly encoded.");for(var n,o,a=0,i=0,c="";o=t.charAt(i++);~o&&(n=a%4?64*n+o:o,a++%4)?c+=String.fromCharCode(255&n>>(-2*a&6)):0)o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(o);return c};function t(e){var t=e.replace(/-/g,"+").replace(/_/g,"/");switch(t.length%4){case 0:break;case 2:t+="==";break;case 3:t+="=";break;default:throw "Illegal base64url string!"}try{return function(e){return decodeURIComponent(r(e).replace(/(.)/g,(function(e,r){var t=r.charCodeAt(0).toString(16).toUpperCase();return t.length<2&&(t="0"+t),"%"+t})))}(t)}catch(e){return r(t)}}function n(e){this.message=e;}function o(e,r){if("string"!=typeof e)throw new n("Invalid token specified");var o=!0===(r=r||{}).header?0:1;try{return JSON.parse(t(e.split(".")[o]))}catch(e){throw new n("Invalid token specified: "+e.message)}}n.prototype=new Error,n.prototype.name="InvalidTokenError";
 

package/dist/esm/loader.js

@@ -1,8 +1,8 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-17b4da69.js';
-import './stencil-hooks.module-eefa3570.js';
-import './global-126fa55c.js';
-import './use-callback-684c8bb7.js';
-import './index.module-14794b69.js';
+import './stencil-hooks.module-203eab48.js';
+import './global-09167b08.js';
+import './use-callback-f03b0607.js';
+import './index.module-48cc9ee0.js';
 
 /*
  Stencil Client Patch Esm v2.4.0 | MIT Licensed | https://stenciljs.com

package/dist/esm/{luxon-5a398612.js → luxon-198ac0b0.js}

@@ -1,4 +1,4 @@
-import { c as createCommonjsModule } from './stencil-hooks.module-eefa3570.js';
+import { c as createCommonjsModule } from './stencil-hooks.module-203eab48.js';
 
 var luxon = createCommonjsModule(function (module, exports) {
 

package/dist/esm/mint-components.js

@@ -1,8 +1,8 @@
 import { p as promiseResolve, H, b as bootstrapLazy } from './index-17b4da69.js';
-import './stencil-hooks.module-eefa3570.js';
-import './global-126fa55c.js';
-import './use-callback-684c8bb7.js';
-import './index.module-14794b69.js';
+import './stencil-hooks.module-203eab48.js';
+import './global-09167b08.js';
+import './use-callback-f03b0607.js';
+import './index.module-48cc9ee0.js';
 
 /*
  Stencil Client Patch Browser v2.4.0 | MIT Licensed | https://stenciljs.com

package/dist/esm/{re-render-f48b74b9.js → re-render-f406e379.js}

@@ -1,5 +1,5 @@
-import { f as useEffect } from './stencil-hooks.module-eefa3570.js';
-import { R, o as on } from './index.module-14794b69.js';
+import { u as useEffect } from './stencil-hooks.module-203eab48.js';
+import { R, o as on } from './index.module-48cc9ee0.js';
 
 const RENDER_EVENT = "sqm:request-rerender";
 /**

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-eefa3570.js';
-import './use-callback-684c8bb7.js';
-import { i as isDemo } from './index.module-14794b69.js';
+import { m as h } from './stencil-hooks.module-203eab48.js';
+import './use-callback-f03b0607.js';
+import { i as isDemo } from './index.module-48cc9ee0.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
 import { A as AssetCardView } from './sqm-asset-card-view-b0f8ef8e.js';

package/dist/esm/sqm-big-stat_35.entry.js

@@ -1,22 +1,21 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { m as h, f as useEffect, i as useState, o as d, j as useRef, b as browser, u as useReducer } from './stencil-hooks.module-eefa3570.js';
-import { i as intl } from './global-126fa55c.js';
-import { u as useCallback } from './use-callback-684c8bb7.js';
-import { i as isDemo, R, d as dist, N, a as dn, P as Pe, O, x, o as on, f as fn, j as Ve, M as Me, k as je, p as Le, l as ln, U } from './index.module-14794b69.js';
+import { m as h, u as useEffect, i as useState, o as d, j as useRef, b as browser, f as useReducer } from './stencil-hooks.module-203eab48.js';
+import { i as intl } from './global-09167b08.js';
+import { u as useCallback } from './use-callback-f03b0607.js';
+import { i as isDemo, R, d as dist, N, a as dn, P as Pe, O, x, o as on, f as fn, j as Ve, M as Me, k as je, p as Le, l as ln, U } from './index.module-48cc9ee0.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { a as useRequestRerender } from './re-render-f48b74b9.js';
-import { u as useChildElements } from './useChildElements-d574b0ce.js';
-import './luxon-5a398612.js';
+import { a as useRequestRerender } from './re-render-f406e379.js';
+import { u as useChildElements } from './useChildElements-11279a92.js';
+import './luxon-198ac0b0.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
 import './sqm-text-span-view-2567b6c0.js';
-import './sqm-portal-container-view-21bd84e0.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-abed2c1e.js';
-import { c as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, C as CheckboxFieldView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-d4705dae.js';
-import './sqm-portal-section-view-a991e019.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-3eb572a5.js';
+import { c as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, C as CheckboxFieldView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-2b7579de.js';
+import './sqm-portal-container-view-2307476f.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -278,10 +277,6 @@ function DividedLayoutView(props, children) {
   const style = {
     LayoutContainer: {
       display: "contents",
-      // "min-width": "320px",
-      // "& > ::slotted(*)": {
-      //   "min-width": "320px",
-      // },
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
         ...getBorder(),
@@ -294,8 +289,10 @@ function DividedLayoutView(props, children) {
   const hostStyle = `
     display: flex;
     flex: 1;
+    box-sizing: border-box;
     flex-direction: ${props.direction};
     background-color: var(--sqm-content-background);
+    overflow-x: clip;
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"
     : ""}