@saasquatch/mint-components 1.15.0-7 → 1.15.0-71

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-124aec2c.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-16279e95.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-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
-require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-7441206d.js');
+const useReferralCodes = require('./useReferralCodes-11cdf43b.js');
+require('./mixins-4761d472.js');
+const copyTextView = require('./copy-text-view-e5223a96.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(--sqm-text-subdued)",
-    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-7cbd60cc.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-7cbd60cc.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-f5ce25cc.js → sqm-portal-email-verification-view-e2590f1b.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
-const global = require('./global-124aec2c.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-16279e95.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const mixins = require('./mixins-4761d472.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-124aec2c.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+require('./global-16279e95.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');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f5ce25cc.js');
+require('./mixins-4761d472.js');
+require('./sqm-text-span-view-7a61ae4c.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-e2590f1b.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -20,11 +20,11 @@ function usePortalEmailVerification(props) {
   const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
   const urlParams = new URLSearchParams(index_module.jn.location.search);
   const nextPage = urlParams.get("nextPage");
-  const [success, setSuccess] = stencilHooks_module.useState(false);
-  const [error, setError] = stencilHooks_module.useState("");
-  const [countdown, setCountdown] = stencilHooks_module.useState(10);
-  const timerRef = stencilHooks_module.useRef(undefined);
-  const countdownRef = stencilHooks_module.useRef(undefined);
+  const [success, setSuccess] = domContextHooks_module.useState(false);
+  const [error, setError] = domContextHooks_module.useState("");
+  const [countdown, setCountdown] = domContextHooks_module.useState(10);
+  const timerRef = domContextHooks_module.useRef(undefined);
+  const countdownRef = domContextHooks_module.useRef(undefined);
   const submit = async () => {
     var _a;
     if (!email)
@@ -75,7 +75,7 @@ function usePortalEmailVerification(props) {
   }
   const resyncTimersCallback = index_module.useCallback(() => resyncTimers(), [countdown]);
   // Refetch validation status timer
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!timerRef.current) {
       checkVerification();
       timerRef.current = startTimer();
@@ -85,7 +85,7 @@ function usePortalEmailVerification(props) {
     };
   }, []);
   // Countdown timer
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (countdown > 0) {
       clearInterval(countdownRef.current);
       countdownRef.current = startCountdown(countdown - 1);
@@ -167,7 +167,7 @@ const PortalEmailVerification = class {
      * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while verifying your password. Please refresh the page.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{sqm-portal-forgot-password-view-b986086e.js → sqm-portal-forgot-password-view-0a8d3243.js}

@@ -1,19 +1,11 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
+const index_module = require('./index.module-4f54e412.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const mixins = require('./mixins-4761d472.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 
-const style = {
-  Wrapper: mixins.AuthWrapper,
-  Column: { ...mixins.AuthColumn },
-  ButtonsContainer: mixins.AuthButtonsContainer,
-  SecondaryButton: {
-    cursor: "pointer",
-    width: "25%",
-  },
-};
 const vanillaStyle = `
 :host {
   display: block;
@@ -22,11 +14,27 @@ const vanillaStyle = `
   display: none;
 }
 `;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
 function PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+  const style = {
+    FormWrapper: {
+      ...mixins.AuthWrapper,
+      background: content.backgroundColor || "var(--sqm-portal-background)",
+      borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)",
+      border: content.border ||
+        "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+    },
+    Column: { ...mixins.AuthColumn },
+    ButtonsContainer: mixins.AuthButtonsContainer,
+    SecondaryButton: {
+      margin: "auto",
+      display: "block",
+      cursor: "pointer",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -39,7 +47,7 @@ function PortalForgotPasswordView(props) {
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       index.h("div", { class: sheet.classes.ButtonsContainer },
         index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
-        index.h("div", { class: sheet.classes.SecondaryButton }, content.secondaryButton)))));
+        index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => index_module.jn.push(states.loginPath) }, content.loginText)))));
 }
 
 exports.PortalForgotPasswordView = PortalForgotPasswordView;