@saasquatch/mint-components 1.13.0-0 → 1.13.0-10

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-require('./index.module-ccf9bd9c.js');
-const reRender = require('./re-render-1e63c82b.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+require('./index.module-57703088.js');
+const reRender = require('./re-render-35b016ed.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-1e63c82b.js');
-const useChildElements = require('./useChildElements-438cf387.js');
+const reRender = require('./re-render-35b016ed.js');
+const useChildElements = require('./useChildElements-854cd1e5.js');
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
@@ -41,7 +41,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module.T();
+  const host = index_module._();
   const tick = reRender.useRerenderListener();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")

package/dist/cjs/{sqm-text-span-view-a22f50aa.js → sqm-text-span-view-0aa82125.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
+const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-a22f50aa.js');
+const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/{stencil-hooks.module-ece1ee46.js → stencil-hooks.module-3a336b0f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
+const index = require('./index-a29c60ef.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/cjs/{useChildElements-438cf387.js → useChildElements-854cd1e5.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 
 function useChildElements() {
-  const host = index_module.T();
+  const host = index_module._();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/cjs/{useInstantAccessRegistration-7d91867a.js → useInstantAccessRegistration-daff8290.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5911d016.js');
+const useRegistrationFormState = require('./useRegistrationFormState-986b5ea1.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);
   const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState();
-  const [request, { loading, errors, data }] = index_module.Cn();
+  const [request, { loading, errors, data }] = index_module.vn();
   const [error, setError] = stencilHooks_module.useState("");
   const submit = async (event) => {
     var _a;

package/dist/cjs/{usePortalRegistrationForm-0d4fbcde.js → usePortalRegistrationForm-a89d736e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5911d016.js');
+const useRegistrationFormState = require('./useRegistrationFormState-986b5ea1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 
 const RegistrationFormQuery = index_module.dist.gql `
@@ -22,10 +22,10 @@ const RegistrationFormQuery = index_module.dist.gql `
 function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const formRef = stencilHooks_module.useRef(null);
-  const locale = index_module.Q();
+  const locale = index_module.L();
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
-  const [request, { loading, errors, data, formError }] = index_module.Te();
-  const queryResponse = index_module.En(RegistrationFormQuery, { key: props.formKey });
+  const [request, { loading, errors, data, formError }] = index_module.Oe();
+  const queryResponse = index_module.wn(RegistrationFormQuery, { key: props.formKey });
   const formLoading = loading || queryResponse.loading;
   stencilHooks_module.useEffect(() => {
     var _a, _b, _c;
@@ -102,9 +102,11 @@ function usePortalRegistrationForm(props) {
     delete formData.password;
     delete formData.confirmPassword;
     const redirectPath = props.redirectPath;
+    const _googleOAuthIdToken = registrationFormState._googleOAuthIdToken;
     const variables = {
       key: props.formKey,
       formData: {
+        ...(_googleOAuthIdToken ? { _googleOAuthIdToken } : {}),
         locale,
         email,
         password,
@@ -128,7 +130,7 @@ function usePortalRegistrationForm(props) {
         managedIdentityResponse.result.results.length &&
         managedIdentityResponse.result.results[0].success &&
         managedIdentityResponse.result.results[0].data.token) {
-        index_module.xn.push(props.nextPage);
+        index_module.jn.push(props.nextPage);
       }
       else if (
       // check for blocked email error response

package/dist/cjs/{useReferralTable-6b4920f9.js → useReferralTable-283d2316.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
-const reRender = require('./re-render-1e63c82b.js');
-const useChildElements = require('./useChildElements-438cf387.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
+const reRender = require('./re-render-35b016ed.js');
+const useChildElements = require('./useChildElements-854cd1e5.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -245,8 +245,8 @@ const GET_IMPACT_TAX = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c, _d;
-  const user = index_module.K();
-  const programIdContext = index_module.z();
+  const user = index_module.J();
+  const programIdContext = index_module.H();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -268,17 +268,17 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.Q();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.En(GET_REFERRER_DATA, {
+  const locale = index_module.L();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.wn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { data: taxResponse, loading: taxLoading } = index_module.En(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: taxResponse, loading: taxLoading } = index_module.wn(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const taxConnection = (_c = taxResponse === null || taxResponse === void 0 ? void 0 : taxResponse.viewer) === null || _c === void 0 ? void 0 : _c.impactConnection;
-  const { envelope: referralData, states, callbacks, } = index_module.On(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.Rn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/cjs/useRegistrationFormState-986b5ea1.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
+
+const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";
+function useRegistrationForm() {
+  const parent = stencilHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
+  const parentValue = stencilHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT);
+  if (!parent)
+    return [undefined, undefined];
+  return [parentValue, parent[1]];
+}
+function useRegistrationFormState(formState) {
+  const host = index_module._();
+  const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
+    registrationFormState,
+    setRegistrationFormState,
+  ]);
+  return { registrationFormState, setRegistrationFormState };
+}
+
+exports.REGISTRATION_FORM_STATE_CONTEXT = REGISTRATION_FORM_STATE_CONTEXT;
+exports.useRegistrationForm = useRegistrationForm;
+exports.useRegistrationFormState = useRegistrationFormState;

package/dist/cjs/{utilities-27e9535b.js → utilities-c135f16f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/components/sqm-base-registration/BaseRegistrationForm.stories.js

@@ -5,8 +5,6 @@ export default {
 };
 const defaultProps = {
   states: {
-    // AL: TODO
-    // registrationFormState: {},
     error: "",
   },
   callbacks: {
@@ -17,9 +15,22 @@ const defaultProps = {
     requiredFieldErrorMessage: "Cannot be empty",
     invalidEmailErrorMessage: "Must be a valid email address",
     googleButton: h("sl-button", null, "Register with Google"),
-    secondaryButton: h("sl-button", null, "Sign in"),
+    secondaryButton: (h("span", null,
+      "Already have an account?",
+      " ",
+      h("sl-button", { padding: "0", style: { width: "60px" }, size: "large", type: "text" }, "Sign in"),
+      " ")),
+  },
+};
+const errorProps = {
+  ...defaultProps,
+  states: {
+    error: "Something went wrong. Please try again.",
   },
 };
 export const Default = () => {
   return h(BaseRegistrationFormView, Object.assign({}, defaultProps));
 };
+export const EmailError = () => {
+  return h(BaseRegistrationFormView, Object.assign({}, errorProps));
+};

package/dist/collection/components/sqm-google-sign-in/sqm-google-sign-in.js

@@ -1,42 +1,38 @@
-import { getEnvironmentSDK } from "@saasquatch/component-boilerplate";
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { Event, Component, h, Prop } from "@stencil/core";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { useEffect, useState, withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Event, h, Prop } from "@stencil/core";
+import { useGoogleSignIn } from "./useGoogleSignIn";
 /**
  * @uiName Google Sign-In Button
  * @description Requires <script src="https://accounts.google.com/gsi/client" async></script> be added to the <head> section.
+ * @undocumented
  */
 export class GoogleSignIn {
   constructor() {
     withHooks(this);
   }
   disconnectedCallback() { }
+  connectedCallback() {
+    const src = "https://accounts.google.com/gsi/client";
+    if (!document.head.querySelector(`script[src="${src}"]`)) {
+      const script = document.createElement("script");
+      script.src = "https://accounts.google.com/gsi/client";
+      script.async = true;
+      document.head.appendChild(script);
+    }
+  }
   render() {
-    const sdk = getEnvironmentSDK();
-    const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
-    useEffect(() => {
-      if (sdk.type !== "SquatchPortal")
-        return;
-      if (!googleButtonDiv)
-        return;
-      const cb = (res) => {
-        this.initComplete.emit(res);
-      };
-      //@ts-expect-error
-      google.accounts.id.initialize({
-        //@ts-expect-error: link component-env/boilerplate for new types
-        client_id: sdk.env.googleClientId,
-        callback: cb,
-      });
-      //@ts-expect-error
-      google.accounts.id.renderButton(googleButtonDiv, {
-        theme: "outline",
-        size: "large",
-        text: this.text,
-      });
-    }, [googleButtonDiv]);
-    // TODO: Maybe a loading placeholder while initialising
-    return h("div", { ref: setGoogleButtonDiv });
+    const { setGoogleButtonDiv } = isDemo()
+      ? useDemoGoogleSignIn(this)
+      : useGoogleSignIn(this);
+    console.log(setGoogleButtonDiv);
+    return (h("div", null,
+      h("style", null, `
+          #googleSignIn {
+            max-width: 402px;
+            width: 100%
+          }`),
+      h("div", { id: "googleSignIn", ref: setGoogleButtonDiv })));
   }
   static get is() { return "sqm-google-sign-in"; }
   static get encapsulation() { return "shadow"; }
@@ -52,7 +48,10 @@ export class GoogleSignIn {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Button text",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "text",
@@ -76,3 +75,42 @@ export class GoogleSignIn {
       }
     }]; }
 }
+function useDemoGoogleSignIn(props) {
+  const [loaded, setLoaded] = useState(false);
+  const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
+  useEffect(() => {
+    const cb = () => {
+      // @ts-expect-error
+      window.onGoogleLibraryLoad = null;
+      setLoaded(true);
+    };
+    // @ts-expect-error
+    if (window.google)
+      cb();
+    // @ts-expect-error
+    window.onGoogleLibraryLoad = cb;
+  }, []);
+  useEffect(() => {
+    if (!googleButtonDiv || !loaded)
+      return;
+    const cb = () => {
+      props.initComplete.emit({ credential: null });
+    };
+    // @ts-expect-error
+    google.accounts.id.initialize({
+      client_id: "PLACEHOLDER",
+      cb: () => { },
+    });
+    //@ts-expect-error
+    google.accounts.id.renderButton(googleButtonDiv, {
+      theme: "outline",
+      size: "large",
+      width: 400,
+      text: props.text,
+      click_listener: cb,
+    });
+  }, [googleButtonDiv, loaded]);
+  return {
+    setGoogleButtonDiv,
+  };
+}

package/dist/collection/components/sqm-google-sign-in/useGoogleSignIn.js

@@ -0,0 +1,46 @@
+import { getEnvironmentSDK } from "@saasquatch/component-boilerplate";
+import { useState, useEffect } from "@saasquatch/stencil-hooks";
+export function useGoogleSignIn(props) {
+  const [loaded, setLoaded] = useState(false);
+  const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
+  useEffect(() => {
+    const cb = () => {
+      // @ts-expect-error
+      window.onGoogleLibraryLoad = null;
+      const sdk = getEnvironmentSDK();
+      if (sdk.type !== "SquatchPortal")
+        return;
+      const cb = (res) => {
+        props.initComplete.emit(res);
+      };
+      //@ts-expect-error
+      google.accounts.id.initialize({
+        //@ts-expect-error: link component-env/boilerplate for new types
+        client_id: sdk.env.googleOAuthId,
+        callback: cb,
+      });
+      setLoaded(true);
+    };
+    // @ts-expect-error
+    if (window.google)
+      cb();
+    // @ts-expect-error
+    window.onGoogleLibraryLoad = cb;
+  }, []);
+  useEffect(() => {
+    if (!googleButtonDiv || !loaded)
+      return;
+    console.log(googleButtonDiv, "googleBUttonDiv");
+    googleButtonDiv.style.maxWidth = "402px";
+    googleButtonDiv.style.width = "100%";
+    //@ts-expect-error
+    google.accounts.id.renderButton(googleButtonDiv, {
+      theme: "outline",
+      size: "large",
+      text: props.text,
+    });
+  }, [googleButtonDiv, loaded]);
+  return {
+    setGoogleButtonDiv,
+  };
+}

package/dist/collection/components/sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
+import { NameFieldsView } from "../sqm-name-fields/sqm-name-fields-view";
 export default {
   title: "Components/Microsite Google Register",
 };
@@ -7,9 +8,15 @@ const defaultProps = {
   states: {
     error: "",
     loading: false,
-    confirmPassword: true,
+    confirmPassword: false,
     hideInputs: false,
     loginPath: "/login",
+    hidePasswords: true,
+    registrationFormState: {
+      initialData: {
+        email: "testuser@example.com",
+      },
+    },
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -20,89 +27,62 @@ const defaultProps = {
   },
   content: {
     pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-    secondaryButton: (h("span", null,
-      "Already have an account?",
-      h("sl-button", { type: "text" }, "Sign in"),
-      " ")),
+    passwordField: null,
+    formData: (h("div", null,
+      " ",
+      h(NameFieldsView, { states: {
+          registrationFormState: {
+            validationErrors: undefined,
+            disabled: true,
+            initialData: {
+              firstName: "Test",
+              lastName: "User",
+            },
+          },
+          content: {
+            firstNameLabel: "First Name",
+            lastNameLabel: "Last Name",
+          },
+        } }),
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
 const errorProps = {
+  ...defaultProps,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
-    confirmPassword: true,
+    confirmPassword: false,
     hideInputs: false,
     loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
+    hidePasswords: true,
+    registrationFormState: {
+      initialData: {
+        email: "testuser@example.com",
+      },
+    },
   },
 };
 const loadingProps = {
+  ...defaultProps,
   states: {
     error: "",
     loading: true,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
-};
-const slottedProps = {
-  states: {
-    error: "",
-    loading: false,
-    confirmPassword: true,
     hideInputs: false,
     loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-    formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+    confirmPassword: false,
+    hidePasswords: true,
+    registrationFormState: {
+      initialData: {
+        email: "testuser@example.com",
+      },
+    },
   },
 };
 export const Default = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps)));
 export const RegisterWithError = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps)));
 export const RegisterLoading = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps)));
-export const FieldsHidden = () => {
-  return (h("sqm-portal-registration", { demoData: {
-      states: {
-        error: "",
-        loading: true,
-        registrationFormState: {},
-        confirmPassword: true,
-        hideInputs: true,
-        loginPath: "/login",
-      },
-    } }));
-};
-export const SlottedInputs = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps)));
 export const TermsAndConditions = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
     ...defaultProps.content,
     terms: (h("p", null,

package/dist/collection/components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js

@@ -134,6 +134,12 @@ export class PortalGoogleRegistrationForm {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
+    /**
+     * Can be "signup_with", "signin_with", "continue_with", or "signin"
+     *
+     * @uiName Google button text
+     */
+    this.googleButtonText = "signup_with";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -153,13 +159,13 @@ export class PortalGoogleRegistrationForm {
     const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: h("slot", { name: "formData" }),
-      googleButton: (h("sqm-google-sign-in", { onInitComplete: handleGoogleInit })),
+      googleButton: (h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
         h("span", null,
           this.loginCTA,
           " ",
-          h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath), className: sheet.classes.LoginButton }, this.loginLabel),
+          h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath), className: sheet.classes.LoginButton }, this.loginLabel),
           " "))),
       terms: h("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
@@ -746,6 +752,27 @@ export class PortalGoogleRegistrationForm {
       "attribute": "form-key",
       "reflect": false
     },
+    "googleButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Google button text",
+            "name": "uiName"
+          }],
+        "text": "Can be \"signup_with\", \"signin_with\", \"continue_with\", or \"signin\""
+      },
+      "attribute": "google-button-text",
+      "reflect": false,
+      "defaultValue": "\"signup_with\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -832,6 +859,7 @@ function useRegisterDemo(props) {
     content: {
       pageLabel: "Register",
       formData: null,
+      passwordField: null,
     },
     refs: {
       formRef: {},