@saasquatch/mint-components 1.2.1 → 1.2.2-11

package/dist/cjs/{sqm-portal-reset-password-view-3980aa63.js → sqm-portal-reset-password-view-b7b52d16.js}

@@ -46,11 +46,11 @@ function PortalResetPasswordView(props) {
   if (states.reset) {
     return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
       index.h("style", { type: "text/css" }, styleString),
-      index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, "Reset your password"),
+      index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, states.content.resetPasswordHeader),
       index.h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "success-icon" },
         index.h("div", { part: "successalert-text" }, "Your password has been reset and you are being redirected. If you are not redirected, please click Continue.")),
       index.h("div", null,
-        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, "Continue"))));
+        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
   }
   if (states.oobCodeValidating) {
     return index.h("div", null);
@@ -61,20 +61,24 @@ function PortalResetPasswordView(props) {
       index.h("sqm-form-message", { class: sheet.classes.CodeError, type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, "The password reset code is invalid or has expired, please try again.")),
       index.h("div", null,
-        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, "Continue"))));
+        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
   }
   return (index.h("div", { class: sheet.classes.Wrapper },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h2" }, states.reset ? "Password Reset" : "Reset your password"),
+    index.h(sqmTextSpanView.TextSpanView, { type: "h2" }, states.reset
+      ? states.content.passwordResetHeader
+      : states.content.resetPasswordHeader),
     index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (index.h("sqm-form-message", { type: "error", class: sheet.classes.Banner, exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
       !states.reset && (index.h("sqm-password-field", { demoData: states.passwordDemoData })),
-      !states.reset && states.confirmPassword && (index.h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: "Confirm Password", disabled: states.loading, required: true })),
+      !states.reset && states.confirmPassword && (index.h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
       index.h("div", { class: sheet.classes.ButtonsContainer },
-        index.h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset ? "Continue" : "Reset Password")))));
+        index.h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset
+          ? states.content.continueButtonText
+          : states.content.resetPasswordButtonText)))));
 }
 
 exports.PortalResetPasswordView = PortalResetPasswordView;

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

@@ -10,9 +10,9 @@ require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-232c94a0.js');
 require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-3980aa63.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-b7b52d16.js');
 
-function usePortalResetPassword({ nextPage, confirmPassword, }) {
+function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;
   const [reset, setReset] = _extends.useState(false);
   const [error, setError] = _extends.useState("");
@@ -38,7 +38,7 @@ function usePortalResetPassword({ nextPage, confirmPassword, }) {
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
     index_module.rn.push({
-      pathname: nextPageOverride || nextPage,
+      pathname: nextPageOverride || props.nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -70,10 +70,17 @@ function usePortalResetPassword({ nextPage, confirmPassword, }) {
     states: {
       loading: resetPasswordState.loading,
       reset,
-      confirmPassword,
+      confirmPassword: props.confirmPassword,
       error: ((_e = (_d = (_c = (_b = resetPasswordState.errors) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.message) || error,
       oobCodeValidating: verifyPasswordResetCodeState.loading,
       oobCodeValid: (_f = verifyPasswordResetCodeState.data) === null || _f === void 0 ? void 0 : _f.verifyManagedIdentityPasswordResetCode.success,
+      content: {
+        passwordResetHeader: props.passwordResetHeader,
+        resetPasswordHeader: props.resetPasswordHeader,
+        continueButtonText: props.continueButtonText,
+        resetPasswordButtonText: props.resetPasswordButtonText,
+        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
+      },
     },
     callbacks: { submit, failed, gotoNextPage },
   };
@@ -91,6 +98,30 @@ const PortalResetPassword = class {
      * @uiName Show confirm password
      */
     this.confirmPassword = false;
+    /**
+     * @uiName Password reset header text
+     */
+    this.resetPasswordHeader = "Reset your password";
+    /**
+     * Displayed after a successful password reset
+     *
+     * @uiName Password reset header text
+     */
+    this.passwordResetHeader = "Password reset";
+    /**
+     * @uiName Password reset button text
+     */
+    this.resetPasswordButtonText = "Reset Password";
+    /**
+     * Displayed after a successful password reset
+     *
+     * @uiName Continue button text
+     */
+    this.continueButtonText = "Continue";
+    /**
+     * @uiName Confirm password field label
+     */
+    this.confirmPasswordFieldLabel = "Confirm Password";
     _extends.h$1(this);
   }
   disconnectedCallback() { }
@@ -110,6 +141,13 @@ function usePortalResetPasswordDemo(props) {
       confirmPassword: true,
       oobCodeValidating: false,
       oobCodeValid: true,
+      content: {
+        passwordResetHeader: "Password reset",
+        resetPasswordHeader: "Reset your password",
+        continueButtonText: "Continue",
+        resetPasswordButtonText: "Reset Password",
+        confirmPasswordFieldLabel: "Confirm Password",
+      },
     },
     callbacks: {
       submit: async (_event) => {

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

@@ -104,7 +104,7 @@ const PortalVerifyEmail = class {
 };
 function usePortalVerifyEmailDemo(props) {
   return cjs.cjs({
-    states: { error: "", loading: false, verified: false },
+    states: { error: "", loading: false, verified: true },
     data: {
       oobCode: "code",
     },

package/dist/collection/collection-manifest.json

@@ -8,6 +8,7 @@
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-form-message/sqm-form-message.js",
     "./components/sqm-graphql-client-provider/sqm-graphql-client-provider.js",
+    "./components/sqm-hero/sqm-hero.js",
     "./components/sqm-hook-story-container/sqm-hook-story-container.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
@@ -18,6 +19,7 @@
     "./components/sqm-portal-change-password/sqm-portal-change-password.js",
     "./components/sqm-portal-container/sqm-portal-container.js",
     "./components/sqm-portal-email-verification/sqm-portal-email-verification.js",
+    "./components/sqm-portal-footer/sqm-portal-footer.js",
     "./components/sqm-portal-forgot-password/sqm-portal-forgot-password.js",
     "./components/sqm-portal-frame/sqm-portal-frame.js",
     "./components/sqm-portal-login/sqm-portal-login.js",

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

@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function HeroView(props) {
+  const { states, content } = props;
+  const isValidColor = (teststr) => {
+    return CSS.supports(`(color: ${teststr})`);
+  };
+  const parseBackground = (provided_bg) => {
+    if (provided_bg) {
+      if (isValidColor(provided_bg)) {
+        return provided_bg;
+      }
+      else {
+        return `url(${provided_bg})`;
+      }
+    }
+    else {
+      return "";
+    }
+  };
+  const column = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "100%",
+  };
+  const style = {
+    TwoColumnContainer: {
+      display: "flex",
+      flexWrap: states.wrapDirection,
+      "& > div": { flex: "1", minWidth: "300px" },
+    },
+    ColumnWrapper: {
+      ...column,
+    },
+    SingleColumnContainer: {
+      ...column,
+    },
+    Container: {
+      width: "100%",
+      flex: 1,
+      ...column,
+      alignItems: "unset",
+      background: `no-repeat center/cover ${parseBackground(states.background)}`,
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+`;
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
+      h("div", { class: sheet.classes.ColumnWrapper }, content.primaryColumn),
+      h("div", { class: sheet.classes.ColumnWrapper }, content.secondaryColumn))) : (h("div", { class: sheet.classes.SingleColumnContainer }, content.primaryColumn))));
+}

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

@@ -0,0 +1,95 @@
+import { Component, h, Prop } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { HeroView } from "./sqm-hero-view";
+import { getProps } from "../../utils/utils";
+/**
+ * The hero container
+ *
+ * @uiName Hero Layout
+ */
+export class Hero {
+  constructor() {
+    /** @uiName Number of columns in the layout */
+    this.columns = 1;
+    /** @uiName Wrap direction */
+    this.wrapDirection = "wrap";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      states: { ...getProps(this) },
+      content: {
+        primaryColumn: h("slot", null),
+        secondaryColumn: h("slot", { name: "secondary-column" }),
+      },
+    };
+    return h(HeroView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columns": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2",
+        "resolved": "1 | 2",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of columns in the layout",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "columns",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background image or color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "background",
+      "reflect": false
+    },
+    "wrapDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"wrap\" | \"wrap-reverse\"",
+        "resolved": "\"wrap\" | \"wrap-reverse\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Wrap direction",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "wrap-direction",
+      "reflect": false,
+      "defaultValue": "\"wrap\""
+    }
+  }; }
+}

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

@@ -8,7 +8,7 @@ export function NavigationSidebarItemView(props) {
   const style = {
     ItemContainer: {
       display: "flex",
-      "background-color": `${states.active ? "#eaeaea" : "#ffffff"}`,
+      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
       "border-radius": "8px",
       padding: "8px",
       "text-decoration": "none",
@@ -17,7 +17,7 @@ export function NavigationSidebarItemView(props) {
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
-        background: states.active ? "#dddddd" : "#f7f7f7",
+        background: states.active ? "var(--sl-color-gray-300)" : "var(--sl-color-gray-50)",
       },
     },
     Label: {

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

@@ -120,8 +120,8 @@ function useSidebarItemDemo(props) {
       active: false,
     },
     data: {
-      label: "Dashboard",
-      icon: "house",
+      label: props.label || "Dashboard",
+      icon: props.icon || "house",
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -35,6 +35,13 @@ export function PortalChangePasswordView(props) {
       width: "25%",
       margin: "var(--sl-spacing-large) auto",
     },
+    PasswordField: {
+      marginBottom: "var(--sl-spacing-large) !important",
+      display: "block",
+    },
+    ChangePasswordButton: {
+      paddingTop: "var(--sl-spacing-x-large)",
+    },
   };
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);
@@ -45,25 +52,25 @@ export function PortalChangePasswordView(props) {
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
         padding: "none",
-        label: (h(TextSpanView, Object.assign({}, { type: "h2" }), "Change password")),
+        label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.modalChangePasswordHeader)),
         content: (h(PortalContainerView, Object.assign({}, { direction: "column", padding: "none", gap: "32px" }),
           states.error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
             h("div", { part: "erroralert-text" }, states.error))),
           states.success && (h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
-            h("div", { part: "successalert-text" }, "Your password has been updated."))),
+            h("div", { part: "successalert-text" }, states.content.successMessage))),
           h("sl-form", { "onSl-submit": callbacks.submit },
             h("div", { class: sheet.classes.InputContainer },
-              h("sqm-password-field", null),
-              h("sl-input", { name: "/confirmPassword", label: "Confirm new password", required: true, togglePassword: true, disabled: states.loading, type: "password" })),
+              h("sqm-password-field", { class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel }),
+              h("sl-input", { name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
-              h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, "Cancel"),
-              h("sl-button", { type: "default", submit: true, loading: states.loading }, "Change Password"))))),
+              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "default", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     h(PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
-      label: h(TextSpanView, Object.assign({}, { type: "h2" }), "Password"),
-      content: (h("sl-button", { onClick: () => callbacks.setOpen(true) }, "Change your password...")),
+      label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
+      content: (h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       h("style", { type: "text/css" }, styleString))));
 }

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js

@@ -10,6 +10,38 @@ import deepmerge from "deepmerge";
 export class PortalChangePassword {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Change password modal header
+     */
+    this.modalChangePasswordHeader = "Change Password";
+    /**
+     * @uiName Modal cancel password change button text
+     */
+    this.cancelText = "Cancel";
+    /**
+     * @uiName Modal change password button text
+     */
+    this.changePasswordButtonText = "Change Password";
+    /**
+     * @uiName Password input field label
+     */
+    this.passwordFieldLabel = "Password";
+    /**
+     * @uiName Password confirmation input field label
+     */
+    this.confirmPasswordFieldLabel = "Confirm new password";
+    /**
+     * @uiName Successful password change message
+     */
+    this.successMessage = "Your password has been updated.";
+    /**
+     * @uiName Portal change password section header
+     */
+    this.portalChangePasswordHeader = "Password";
+    /**
+     * @uiName Portal change password button text
+     */
+    this.portalChangePasswordButtonText = "Change your password...";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -22,12 +54,180 @@ export class PortalChangePassword {
   static get is() { return "sqm-portal-change-password"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "modalChangePasswordHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Change password modal header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-change-password-header",
+      "reflect": false,
+      "defaultValue": "\"Change Password\""
+    },
+    "cancelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Modal cancel password change button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "cancel-text",
+      "reflect": false,
+      "defaultValue": "\"Cancel\""
+    },
+    "changePasswordButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Modal change password button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "change-password-button-text",
+      "reflect": false,
+      "defaultValue": "\"Change Password\""
+    },
+    "passwordFieldLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Password input field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "password-field-label",
+      "reflect": false,
+      "defaultValue": "\"Password\""
+    },
+    "confirmPasswordFieldLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Password confirmation input field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirm-password-field-label",
+      "reflect": false,
+      "defaultValue": "\"Confirm new password\""
+    },
+    "successMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Successful password change message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "success-message",
+      "reflect": false,
+      "defaultValue": "\"Your password has been updated.\""
+    },
+    "portalChangePasswordHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Portal change password section header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "portal-change-password-header",
+      "reflect": false,
+      "defaultValue": "\"Password\""
+    },
+    "portalChangePasswordButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Portal change password button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "portal-change-password-button-text",
+      "reflect": false,
+      "defaultValue": "\"Change your password...\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalChangePasswordViewProps>",
-        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; }; }",
+        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -59,7 +259,20 @@ export class PortalChangePassword {
 }
 function usePortalChangePasswordDemo(props) {
   return deepmerge({
-    states: { open: true, error: "" },
+    states: {
+      open: true,
+      error: "",
+      content: {
+        modalChangePasswordHeader: "Change Password",
+        cancelText: "Cancel",
+        changePasswordButtonText: "Change Password",
+        passwordFieldLabel: "Password",
+        confirmPasswordFieldLabel: "Confirm new password",
+        successMessage: "Your password has been updated.",
+        portalChangePasswordHeader: "Password",
+        portalChangePasswordButtonText: "Change your password...",
+      },
+    },
     callbacks: {
       setOpen: (o) => console.log(o),
       submit: (e) => console.log("Submit", e),

package/dist/collection/components/sqm-portal-change-password/usePortalChangePassword.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
 import { useChangePasswordMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
-export function usePortalChangePassword(_props) {
+export function usePortalChangePassword(props) {
   var _a, _b, _c, _d;
   const [request, { loading, errors, data }] = useChangePasswordMutation();
   const [open, setOpen] = useState(false);
@@ -41,6 +41,16 @@ export function usePortalChangePassword(_props) {
       loading,
       success,
       error: error || ((_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message),
+      content: {
+        modalChangePasswordHeader: props.modalChangePasswordHeader,
+        cancelText: props.cancelText,
+        changePasswordButtonText: props.changePasswordButtonText,
+        passwordFieldLabel: props.passwordFieldLabel,
+        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
+        successMessage: props.successMessage,
+        portalChangePasswordHeader: props.portalChangePasswordHeader,
+        portalChangePasswordButtonText: props.changePasswordButtonText,
+      },
     },
     data: {},
     callbacks: {