@saasquatch/mint-components 1.6.3 → 1.6.4-1

package/dist/cjs/{ShadowViewAddon-25a9cece.js → ShadowViewAddon-f8dc3d5c.js}

@@ -11,8 +11,7 @@ const useChildElements = require('./useChildElements-6993ec39.js');
 const luxon = require('./luxon-479fc825.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-aea267ba.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-b336f655.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-1e5bbcb1.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5beae29c.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -325,7 +324,7 @@ const EditProfileView = (props) => {
   return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
     index.h("div", { class: "FormSection" },
       index.h("h2", { style: {
-          fontSize: "var(--sl-font-size-x-large",
+          fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",
         } }, text.editprofileheader),
@@ -1437,6 +1436,11 @@ function StatContainerView(props, children) {
       "& > ::slotted(*:last-child)": {
         "border-right": "none",
       },
+      "@media screen and (max-width: 430px)": {
+        "& > ::slotted(*)": {
+          borderRight: "none",
+        },
+      },
     },
     StatFrame: {
       display: "flex",
@@ -1500,7 +1504,7 @@ function PortalChangePasswordView(props) {
   return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
     index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
         padding: "none",
         label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.modalChangePasswordHeader)),
@@ -1517,7 +1521,7 @@ function PortalChangePasswordView(props) {
               index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
               index.h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
-    index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+    index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),

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

@@ -16,11 +16,10 @@ const useChildElements = require('./useChildElements-6993ec39.js');
 require('./luxon-479fc825.js');
 const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-aea267ba.js');
-require('./sqm-portal-container-view-b336f655.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const useRegistrationFormState = require('./useRegistrationFormState-8f2caf7f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-25a9cece.js');
-require('./sqm-portal-section-view-1e5bbcb1.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f8dc3d5c.js');
+require('./sqm-portal-container-view-5beae29c.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -282,10 +281,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(),
@@ -298,8 +293,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);"
     : ""}

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

@@ -6,12 +6,11 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
 const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-b336f655.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-1e5bbcb1.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5beae29c.js');
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (index.h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+  return (index.h("sqm-portal-container", { padding: "large", gap: "medium" },
     index.h("sqm-image", { "image-url": emptyStateImage }),
     index.h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       index.h("sqm-text", { slot: "label" },
@@ -19,7 +18,7 @@ function EmptyStateView(props) {
       index.h("sqm-text", { slot: "content" }, emptyStateText))));
 }
 
-const HeroImage = class {
+const Empty = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
@@ -206,11 +205,11 @@ const TitledSection = class {
   render() {
     const label = index.h("slot", { name: "label" }, this.label);
     const content = index.h("slot", { name: "content" });
-    return index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, { ...utils.getProps(this), label, content }));
+    return index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, { ...utils.getProps(this), label, content }));
   }
 };
 
-exports.sqm_empty = HeroImage;
+exports.sqm_empty = Empty;
 exports.sqm_image = Image;
 exports.sqm_portal_container = PortalContainer;
 exports.sqm_text = Text;

package/dist/cjs/sqm-navigation-sidebar-view-4704aa73.js

@@ -0,0 +1,158 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+
+const vanillaStyle = `
+
+* {
+  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;
+  }
+}
+`;
+function NavigationSidebarView(props, children) {
+  return (index.h("div", { class: "container" },
+    index.h("style", null, vanillaStyle),
+    index.h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),
+    index.h("div", { class: "hamburger" },
+      index.h("div", { class: "line" }),
+      index.h("div", { class: "line" }),
+      index.h("div", { class: "line" })),
+    index.h("div", { class: "menu-items" }, children)));
+}
+
+exports.NavigationSidebarView = NavigationSidebarView;

package/dist/cjs/sqm-navigation-sidebar.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
-require('./mixins-fe9d4112.js');
-require('./JSS-8503a151.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-87756d23.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-0b9b8891.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-4704aa73.js');
 
 const NavigationSidebar = class {
   constructor(hostRef) {
@@ -16,8 +16,25 @@ const NavigationSidebar = class {
   }
   disconnectedCallback() { }
   render() {
-    return (index.h(sqmNavigationSidebarView.NavigationSidebarView, null, index.h("slot", null)));
+    const props = useNavigationSidebar();
+    return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, props), index.h("slot", null)));
   }
 };
+function useNavigationSidebar() {
+  const location = index_module.ln();
+  const programId = index_module.O();
+  const [checked, setChecked] = stencilHooks_module.useState(false);
+  // Close hamburger menu after navigation
+  stencilHooks_module.useEffect(() => {
+    setChecked(false);
+  }, [location.pathname, programId]);
+  function onClick(e) {
+    setChecked(e.target.checked);
+  }
+  return {
+    checked,
+    onClick,
+  };
+}
 
 exports.sqm_navigation_sidebar = NavigationSidebar;

package/dist/cjs/{sqm-portal-container-view-b336f655.js → sqm-portal-container-view-5beae29c.js}

@@ -3,9 +3,31 @@
 const index = require('./index-b0129cd6.js');
 const JSS = require('./JSS-8503a151.js');
 
+function PortalSectionView(props) {
+  // Due to sole usage of props, not feasiable to move out of render function
+  const style = {
+    LabelContainer: {
+      "margin-bottom": props.labelMargin === "none"
+        ? props.labelMargin
+        : `var(--sl-spacing-${props.labelMargin})`,
+    },
+    SectionContainer: {
+      textAlign: props.textAlign || "left",
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.SectionContainer },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: sheet.classes.LabelContainer }, props.label),
+    props.content));
+}
+
 function PortalContainerView(props, children) {
   const style = {
     Container: {
+      boxSizing: "border-box",
       display: props.display || "grid",
       flexWrap: "wrap",
       "grid-template-columns": props.direction === "row"
@@ -33,3 +55,4 @@ function PortalContainerView(props, children) {
 }
 
 exports.PortalContainerView = PortalContainerView;
+exports.PortalSectionView = PortalSectionView;

package/dist/cjs/{sqm-portal-profile-view-b7ceb690.js → sqm-portal-profile-view-d63d74bd.js}

@@ -4,7 +4,6 @@ const index = require('./index-b0129cd6.js');
 const global = require('./global-a320ad05.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-aea267ba.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-b336f655.js');
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;
@@ -12,19 +11,45 @@ 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",
       },
     },
   };
@@ -34,26 +59,16 @@ function PortalProfileView(props) {
     type: "region",
   })
     : "";
-  return (index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, {
-    direction: "row",
-    padding: "xxx-large",
-    gap: "xxx-large",
-    minWidth: "600px",
-  }),
+  return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
     index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
     index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),
     index.h("form", { class: sheet.classes.FormStyle, onSubmit: callbacks.onSubmit },
-      states.success && (index.h("sqm-form-message", { exportparts: "success-icon" },
+      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, exportparts: "success-icon" },
         index.h("div", { part: "successalert-text" }, "Your profile has been successfully updated."))),
       error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, error))),
-      index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, {
-        direction: "row",
-        padding: "none",
-        gap: "32px",
-        minWidth: "50%",
-      }),
+      index.h("div", { class: sheet.classes.NameInputContainer },
         index.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/cjs/sqm-portal-profile.cjs.entry.js

@@ -11,8 +11,7 @@ const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-aea267ba.js');
-require('./sqm-portal-container-view-b336f655.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-b7ceb690.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-d63d74bd.js');
 
 const GET_USER = index_module.dist.gql `
   query {

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

@@ -18,17 +18,16 @@ require('./sqm-text-span-view-aea267ba.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-59c39ed2.js');
 const sqmHeroView = require('./sqm-hero-view-7bb2383c.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-87756d23.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-4704aa73.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-bf62d5e2.js');
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-155695c8.js');
 const sqmPortalFooterView = require('./sqm-portal-footer-view-edb2fbe3.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-f5c9b4b3.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-b336f655.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-b7ceb690.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-d63d74bd.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-92236225.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-74b01b5f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-25a9cece.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-1e5bbcb1.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f8dc3d5c.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5beae29c.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -3567,20 +3566,6 @@ const style = {
 };
 const sheet = JSS.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,
@@ -3602,7 +3587,7 @@ const item2Props = {
   },
 };
 const Sidebar = () => {
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps),
+  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, null,
     index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props)),
     index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props))));
 };
@@ -3665,7 +3650,7 @@ const Dashboard = () => {
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3679,7 +3664,7 @@ const Dashboard = () => {
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
           index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3687,21 +3672,21 @@ const Dashboard = () => {
           content: (index.h("sqm-text", null,
             index.h("p", null, "Get rewarded for referring potential customers to MyCompany. Earn commission for each successful lead you send our way"))),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Share your referral link"))),
           content: index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, sharelinkProps)),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Share your referral code"))),
           content: index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, sharecodeProps)),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3787,7 +3772,7 @@ const Commissions = () => {
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3812,7 +3797,7 @@ const Activity = () => {
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3825,7 +3810,7 @@ const Activity = () => {
               " ",
               "program"))),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3836,7 +3821,7 @@ const Activity = () => {
             index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
             index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
         }))),
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
         padding: "xxx-large",
         label: (index.h("sqm-text", null,
@@ -3956,20 +3941,6 @@ const NavigationSidebar_stories = {
   title: "Components/Navigation Sidebar",
 };
 const DefaultNavigationSidebar = () => {
-  const barProps = {
-    data: {
-      programs: [
-        {
-          key: "program1",
-          label: "My Referral Program",
-        },
-        {
-          key: "program2",
-          label: "My Rewards Program",
-        },
-      ],
-    },
-  };
   const item1Props = {
     states: {
       active: false,
@@ -3990,7 +3961,7 @@ const DefaultNavigationSidebar = () => {
       path: "/",
     },
   };
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps),
+  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, null,
     index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props)),
     index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props))));
 };
@@ -4583,20 +4554,6 @@ const AssetCard = /*#__PURE__*/Object.freeze({
 const DividedLayout_stories = {
   title: "Components/Divided Layout",
 };
-const barProps$1 = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
 const item1Props$1 = {
   states: {
     active: false,
@@ -4618,7 +4575,7 @@ const item2Props$1 = {
   },
 };
 const Sidebar$1 = () => {
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps$1),
+  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, null,
     index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props$1)),
     index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props$1))));
 };
@@ -4626,7 +4583,7 @@ const Row = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -4639,7 +4596,7 @@ const Column = () => {
   return (index.h("sqm-divided-layout", { direction: "column" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -4652,7 +4609,7 @@ const ColumnCustomDivider = () => {
   return (index.h("sqm-divided-layout", { direction: "column", dividerStyle: "1px solid red" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,