@saasquatch/mint-components 1.16.0-8 → 2.0.0-0

package/dist/cjs/sqm-navigation-sidebar-item-view-4e88f774.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const index = require('./index-a43a63b4.js');
+const index_module = require('./index.module-4f54e412.js');
+const JSS = require('./JSS-8503a151.js');
+const mixins = require('./mixins-4761d472.js');
+
+function NavigationSidebarItemView(props) {
+  const { states, data, padding = "x-small" } = props;
+  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-primary-button-background-hover)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-button-background)";
+  const textFocusedColor = props.textFocusedColor || "var(--sqm-primary-button-color)";
+  const style = {
+    ItemContainer: {
+      display: "flex",
+      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
+      padding: `var(--sl-spacing-${padding})`,
+      "text-decoration": "none",
+      color: states.active
+        ? textFocusedColor
+        : props.textColor || "var(--sqm-text)",
+      "align-items": "center",
+      ...mixins.gap({ direction: "row", size: "var(--sl-font-size-small)" }),
+      "&:hover": {
+        cursor: "pointer",
+        background: states.active
+          ? backgroundFocusedColor
+          : backgroundHoverColor,
+        color: states.active
+          ? textFocusedColor
+          : props.textHoverColor || "var(--sqm-primary-button-color-hover)",
+      },
+    },
+    Label: {
+      margin: "0",
+    },
+    Icon: {
+      "flex-shrink": "0",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
+      e.preventDefault();
+      index_module.jn.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    index.h("p", { class: sheet.classes.Label, part: "sqm-label" }, data.label)));
+}
+
+exports.NavigationSidebarItemView = NavigationSidebarItemView;

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-0d3ac0fb.js');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6f35d2ee.js');
+require('./mixins-4761d472.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-4e88f774.js');
 
 function useNavigationSidebarItem(props) {
   const currentPage = index_module.kn();
@@ -20,15 +20,30 @@ function useNavigationSidebarItem(props) {
     data: {
       label: props.label,
       icon: props.icon,
-      path: props.path
+      path: props.path,
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   };
 }
 
 const NavigationSidebarItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
+    /**
+     * @uiName Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.padding = "x-small";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -47,6 +62,14 @@ function useSidebarItemDemo(props) {
       label: props.label || "Dashboard",
       icon: props.icon || "house",
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

package/dist/cjs/{sqm-navigation-sidebar-view-17111896.js → sqm-navigation-sidebar-view-de90ef03.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 
-const vanillaStyle = `
+function NavigationSidebarView(props, children) {
+  const vanillaStyle = `
 
 * {
   padding: 0;
@@ -10,6 +11,16 @@ const vanillaStyle = `
   box-sizing: border-box;
 }
 
+.container {
+  background: var(--sqm-portal-background);
+}
+
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 @keyframes slideIn {
   0% {
     left: -350px;
@@ -61,12 +72,12 @@ const vanillaStyle = `
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items { 
+  .menu-items {
     display: none;
     padding: 20px;
-    border-right: 1px solid #eaeaea;
+    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
     padding-top: 60px;
-    background: white; 
+    background: var(--sqm-portal-background); 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -130,7 +141,7 @@ const vanillaStyle = `
   .toggler:checked ~ .hamburger > .line:nth-child(2),
   .toggler:checked ~ .hamburger > .line:nth-child(3) {
     width: 75%;
-    border-bottom: 3px solid #444445;
+    border-bottom: 3px solid ${props.mobileMenuColor};
     margin: 0;
   }
 
@@ -140,11 +151,10 @@ const vanillaStyle = `
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid #444445;
+    border-bottom: 5px solid ${props.mobileMenuColor};
   }
 }
 `;
-function NavigationSidebarView(props, children) {
   return (index.h("div", { class: "container", part: "sqm-base" },
     index.h("style", null, vanillaStyle),
     index.h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),

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

@@ -2,38 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
+const cjs = require('./cjs-1066ec21.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-de90ef03.js');
 
 const NavigationSidebar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    /**
+     * @uiName Text color
+     * @uiWidget color
+     * @format color
+     * @uiGroup Style
+     */
+    this.mobileMenuColor = "var(--sqm-text, #444445)";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = useNavigationSidebar();
+    const props = index_module.isDemo()
+      ? useDemoNavigationSidebar(this)
+      : useNavigationSidebar(this);
     return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, props), index.h("slot", null)));
   }
 };
-function useNavigationSidebar() {
+function useNavigationSidebar(props) {
   const location = index_module.kn();
   const programId = index_module.H();
-  const [checked, setChecked] = stencilHooks_module.useState(false);
+  const [checked, setChecked] = domContextHooks_module.useState(false);
   // Close hamburger menu after navigation
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     setChecked(false);
   }, [location.pathname, programId]);
   function onClick(e) {
     setChecked(e.target.checked);
   }
   return {
+    mobileMenuColor: props.mobileMenuColor,
     checked,
     onClick,
   };
 }
+function useDemoNavigationSidebar(props) {
+  return cjs.cjs({
+    mobileMenuColor: props.mobileMenuColor,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
 
 exports.sqm_navigation_sidebar = NavigationSidebar;

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-8bba5b3a.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-0d3ac0fb.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
-require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-c85acaaa.js');
+const useReferralCodes = require('./useReferralCodes-11cdf43b.js');
+require('./mixins-4761d472.js');
+const copyTextView = require('./copy-text-view-51c8ee5d.js');
 
 const style = {
   Container: {
@@ -29,7 +29,7 @@ const style = {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PaginationView(props) {
-  const { states, callbacks, text } = props;
+  const { states, callbacks, text, buttonType } = props;
   const { onNext, onPrev } = callbacks;
   const { currentPage, totalPages, loading } = states;
   if (totalPages === 1)
@@ -37,10 +37,10 @@ function PaginationView(props) {
   return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString),
     !loading && (index.h(index.Fragment, null,
-      index.h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      index.h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
         index.h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
       index.h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
-    index.h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+    index.h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       index.h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }
 
@@ -79,7 +79,16 @@ const Pagination = class {
      * @uiName Pagination text
      */
     this.paginationText = "{currentPage} of {totalPages}";
-    stencilHooks_module.h$1(this);
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "secondary";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -90,13 +99,14 @@ const Pagination = class {
   }
 };
 function useDemoPagination(props) {
-  const [currentPage, setCurrentPage] = stencilHooks_module.useState(1);
+  const [currentPage, setCurrentPage] = domContextHooks_module.useState(1);
   return cjs.cjs({
     states: {
       currentPage,
       totalPages: 5,
       loading: false,
     },
+    buttonType: props.buttonType,
     callbacks: {
       onNext: () => setCurrentPage(currentPage + 1),
       onPrev: () => setCurrentPage(currentPage - 1),
@@ -139,7 +149,7 @@ function useReferralCode(props) {
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   async function onClick() {
     if (contextData) {
       await setCopied({ referralCode: contextData.referralCode });
@@ -207,6 +217,7 @@ const ReferralCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -220,9 +231,19 @@ const ReferralCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
-    stencilHooks_module.h$1(this);
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -234,7 +255,7 @@ const ReferralCode = class {
   }
 };
 function useDemoReferralCode(props) {
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   const copyString = "REFERRALCODE001";
   return cjs.cjs({
     copyString: copyString,
@@ -245,6 +266,11 @@ function useDemoReferralCode(props) {
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
     isCopied: props.showNotificationText,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     isUsed: false,
     rewardStatus: "AVAILABLE",
     open,
@@ -258,53 +284,53 @@ function useDemoReferralCode(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
-  Wrapper: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-large)",
-  },
-  HeaderContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  ShareCodeContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  ShareButtonContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  TitleText: {
-    color: "var(--sl-color-neutral-700)",
-    fontSize: "var(--sl-font-size-large)",
-    margin: "0",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
 function ReferralCodesView(props) {
-  const { slots, titleText, states } = props;
+  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
+  const style = {
+    Wrapper: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-large)",
+      color: textColor,
+    },
+    HeaderContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+    },
+    ShareCodeContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    ShareButtonContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    TitleText: {
+      fontSize: "var(--sl-font-size-large)",
+      margin: "0",
+    },
+  };
+  const vanillaStyle = `
+    :host {
+      display: block;
+    }
+    :host([hidden]): {
+      display: none;
+    }
+  `;
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
   const getSlotContent = (states) => {
     if (states.noCodes) {
       return slots.empty;
@@ -312,16 +338,16 @@ function ReferralCodesView(props) {
     if (states.loading) {
       return slots.loading;
     }
-    return (index.h("div", { class: sheet$1.classes.Wrapper },
-      index.h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
-      index.h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
+    return (index.h("div", { class: sheet.classes.Wrapper },
+      index.h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
+      index.h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
   };
-  return (index.h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
+  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
-      styleString$1),
-    index.h("div", { class: sheet$1.classes.HeaderContainer },
-      index.h("h2", { class: sheet$1.classes.TitleText }, titleText),
+      styleString),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("h2", { class: sheet.classes.TitleText }, titleText),
       !states.noCodes && !states.loading && slots.pagination),
     getSlotContent(states)));
 }
@@ -345,7 +371,7 @@ const ReferralCodes = class {
      * @uiName Empty State Image URL
      */
     this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -381,6 +407,7 @@ function LoadingRow() {
 function useDemoReferralCodes(props) {
   return cjs.cjs({
     titleText: props.titleText,
+    textColor: props.textColor,
     states: {
       noCodes: false,
       loading: false,

package/dist/cjs/sqm-password-field.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-0d3ac0fb.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
+const mixins = require('./mixins-4761d472.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
 
 var constants = {
   error: {
@@ -510,8 +510,8 @@ function PortalResetPasswordView(props) {
 }
 
 function usePasswordField(props) {
-  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
-  const [dynamicValidation, setDynamicValidation] = stencilHooks_module.useState("");
+  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const [dynamicValidation, setDynamicValidation] = domContextHooks_module.useState("");
   function onInput(input) {
     const validation = validateNewPassword(input.target.value, props);
     setDynamicValidation(validation);
@@ -570,7 +570,7 @@ const PortalPasswordField = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -582,8 +582,8 @@ const PortalPasswordField = class {
 };
 function usePasswordFieldDemo(props) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [dynamicValidation, setDynamicValidation] = stencilHooks_module.useState("");
-  const [lastValidated, setLastValidated] = stencilHooks_module.useState("");
+  const [dynamicValidation, setDynamicValidation] = domContextHooks_module.useState("");
+  const [lastValidated, setLastValidated] = domContextHooks_module.useState("");
   if (props.demoData && lastValidated != ((_a = props === null || props === void 0 ? void 0 : props.demoData) === null || _a === void 0 ? void 0 : _a.initValue)) {
     const validation = validateNewPassword(((_b = props === null || props === void 0 ? void 0 : props.demoData) === null || _b === void 0 ? void 0 : _b.initValue) || "", props);
     setDynamicValidation(((_c = props === null || props === void 0 ? void 0 : props.demoData) === null || _c === void 0 ? void 0 : _c.initValue) === "" ? "" : validation);

package/dist/cjs/sqm-popup-container.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
-const utils = require('./utils-6847bc06.js');
+const index = require('./index-a43a63b4.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
+const utils = require('./utils-0d3ac0fb.js');
 
 const PopupContainerView = (props) => {
   const { states, callbacks } = props;
@@ -62,7 +62,7 @@ const PopupContainer = class {
      * @uiName "Powered by" text
      */
     this.poweredByText = "Powered By";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{sqm-portal-container-view-4f15143a.js → sqm-portal-container-view-07e4343f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
 
 function PortalSectionView(props) {
@@ -38,7 +38,7 @@ function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "transparent",
+      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
     },
   };
   const vanillaStyle = `

package/dist/cjs/{sqm-portal-email-verification-view-7ebb426a.js → sqm-portal-email-verification-view-5518eb0d.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
-const global = require('./global-e31dc4f5.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-8bba5b3a.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const mixins = require('./mixins-4761d472.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,