@saasquatch/mint-components 1.13.0-21 → 1.13.0-23

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.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 cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-cccf76d0.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-674395fe.js');
+require('./sqm-text-span-view-0aa82125.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 
 let globalPromise = null;
 function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const global = require('./global-87d0a985.js');
-const index_module = require('./index.module-74078685.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const global = require('./global-19fc8a7a.js');
+const index_module = require('./index.module-57703088.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-3155ad36.js');
-const reRender = require('./re-render-117a341e.js');
-const useChildElements = require('./useChildElements-bd9427fc.js');
-const luxon = require('./luxon-3b809948.js');
-const mockRewardData = require('./mockRewardData-6e4a90f9.js');
-const useReferralTable = require('./useReferralTable-6b47507b.js');
-const sqmTextSpanView = require('./sqm-text-span-view-cccf76d0.js');
+const GenericTableView = require('./GenericTableView-a9f4ba75.js');
+const reRender = require('./re-render-35b016ed.js');
+const useChildElements = require('./useChildElements-854cd1e5.js');
+const luxon = require('./luxon-2926d85f.js');
+const mockRewardData = require('./mockRewardData-272e22d6.js');
+const useReferralTable = require('./useReferralTable-283d2316.js');
+const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());

package/dist/cjs/sqm-referred-registration.cjs.entry.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-const emailRegistrationView = require('./email-registration-view-ff5fa29b.js');
-require('./useRegistrationFormState-4a63d838.js');
-const useInstantAccessRegistration = require('./useInstantAccessRegistration-ac33393b.js');
+const emailRegistrationView = require('./email-registration-view-55b378dc.js');
+require('./useRegistrationFormState-986b5ea1.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-daff8290.js');
 
 const ReferredRegistration = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table-customer-note-cell.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.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-cccf76d0.js');
+const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 
 const RewardTableCustomerNoteCell = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table-customer-note-column.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-require('./index.module-74078685.js');
-const reRender = require('./re-render-117a341e.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 RewardTableCustomerNoteColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const global = require('./global-87d0a985.js');
-const index_module = require('./index.module-74078685.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const global = require('./global-19fc8a7a.js');
+const index_module = require('./index.module-57703088.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-3155ad36.js');
-const reRender = require('./re-render-117a341e.js');
-const useChildElements = require('./useChildElements-bd9427fc.js');
-const luxon = require('./luxon-3b809948.js');
-const mockRewardData = require('./mockRewardData-6e4a90f9.js');
-const useReferralTable = require('./useReferralTable-6b47507b.js');
+const GenericTableView = require('./GenericTableView-a9f4ba75.js');
+const reRender = require('./re-render-35b016ed.js');
+const useChildElements = require('./useChildElements-854cd1e5.js');
+const luxon = require('./luxon-2926d85f.js');
+const mockRewardData = require('./mockRewardData-272e22d6.js');
+const useReferralTable = require('./useReferralTable-283d2316.js');
 
 const debug = stencilHooks_module.browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
+const index = require('./index-a29c60ef.js');
 
 const SqmRoute = class {
   constructor(hostRef) {

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

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-require('./global-87d0a985.js');
-const index_module = require('./index.module-74078685.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+require('./global-19fc8a7a.js');
+const index_module = require('./index.module-57703088.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-ef4df2bd.js');
+const copyTextView = require('./copy-text-view-9b950efe.js');
 require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-3155ad36.js');
-require('./useChildElements-bd9427fc.js');
-const luxon = require('./luxon-3b809948.js');
-require('./sqm-text-span-view-cccf76d0.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-6460e2ad.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-cf3a9a8e.js');
+const GenericTableView = require('./GenericTableView-a9f4ba75.js');
+require('./useChildElements-854cd1e5.js');
+const luxon = require('./luxon-2926d85f.js');
+require('./sqm-text-span-view-0aa82125.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
 require('./index-8c6255f5.js');
-const emailRegistrationView = require('./email-registration-view-ff5fa29b.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d094b47e.js');
-const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-b61c8bdf.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-64a1d639.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-eb5eafe1.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-7756d649.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-de9c0d21.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-2e832545.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-ebfa62d1.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-f4256a13.js');
-require('./utilities-74209973.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-2fe17ea5.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-674395fe.js');
-const ShadowViewAddon = require('./ShadowViewAddon-0ff12dd9.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-70eaf785.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-dc2cfb99.js');
+const emailRegistrationView = require('./email-registration-view-55b378dc.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-9bba5f7e.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-98d84549.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8a2c8763.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-bd72eeff.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-bae28ea0.js');
+require('./utilities-c135f16f.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
+const ShadowViewAddon = require('./ShadowViewAddon-44cb1a98.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-9dfa2a16.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-require('./index.module-74078685.js');
-const reRender = require('./re-render-117a341e.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-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.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-117a341e.js');
-const useChildElements = require('./useChildElements-bd9427fc.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.

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a43a63b4.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-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.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-cccf76d0.js');
+const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 
 const Text = class {
   constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a43a63b4.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-bd9427fc.js → useChildElements-854cd1e5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-57703088.js');
 
 function useChildElements() {
   const host = index_module._();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.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-4a63d838.js');
+const useRegistrationFormState = require('./useRegistrationFormState-986b5ea1.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);

package/dist/cjs/{usePortalRegistrationForm-6ec45064.js → usePortalRegistrationForm-a89d736e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.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-4a63d838.js');
+const useRegistrationFormState = require('./useRegistrationFormState-986b5ea1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 
 const RegistrationFormQuery = index_module.dist.gql `

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

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.js');
-const reRender = require('./re-render-117a341e.js');
-const useChildElements = require('./useChildElements-bd9427fc.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";

package/dist/cjs/{useRegistrationFormState-4a63d838.js → useRegistrationFormState-986b5ea1.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.js');
+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";

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

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-74078685.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/sqm-base-registration-form-view.js

@@ -56,7 +56,7 @@ export function BaseRegistrationFormView(props) {
           }
         } }),
       h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" }, className: "register-button" }, content.submitLabel || "Register"),
+        h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),
         content.googleButton,
         content.secondaryButton))));

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

@@ -1,5 +1,5 @@
 import { useEffect, useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Event, h, Prop } from "@stencil/core";
+import { Component, Event, h, Prop, Element, } from "@stencil/core";
 import { useGoogleSignIn } from "./useGoogleSignIn";
 /**
  * @uiName Google Sign-In Button
@@ -8,6 +8,7 @@ import { useGoogleSignIn } from "./useGoogleSignIn";
  */
 export class GoogleSignIn {
   constructor() {
+    this.googleButtonDiv = null;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -22,17 +23,10 @@ export class GoogleSignIn {
   }
   render() {
     const { setGoogleButtonDiv } = useGoogleSignIn(this);
-    return (h("div", null,
-      h("style", null, `
-          .custom-google-button {
-            width: 100%;
-            max-width: 400px;
-            height: 40px;
-          }
-          `),
-      h("div", { ref: setGoogleButtonDiv })));
+    return (h("div", { ref: setGoogleButtonDiv, style: { width: "100%" } }));
   }
   static get is() { return "sqm-google-sign-in"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "text": {
       "type": "string",
@@ -54,11 +48,11 @@ export class GoogleSignIn {
       "attribute": "text",
       "reflect": false
     },
-    "submitButton": {
+    "googleButtonDiv": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "HTMLElement",
+        "original": "HTMLElement | null",
         "resolved": "HTMLElement",
         "references": {
           "HTMLElement": {
@@ -67,11 +61,12 @@ export class GoogleSignIn {
         }
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "defaultValue": "null"
     }
   }; }
   static get events() { return [{
@@ -90,6 +85,7 @@ export class GoogleSignIn {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "el"; }
 }
 function useDemoGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);

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

@@ -1,38 +1,30 @@
 import { getEnvironmentSDK } from "@saasquatch/component-boilerplate";
-import { useState, useEffect, useRef } from "@saasquatch/stencil-hooks";
+import { useState, useEffect } from "@saasquatch/stencil-hooks";
 export function useGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);
-  const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
-  const [buttonWidth, setButtonWidth] = useState(null);
-  const resizeTimeoutRef = useRef(null);
-  function getButtonWidth() {
-    return Math.max(200, Math.min(400, window.innerWidth * 0.7 - 20));
-  }
+  const [googleButtonDiv, setGoogleButtonDiv] = useState(null); // State for the div reference
+  const [buttonWidth, setButtonWidth] = useState(400); // Default width
+  // Set up the ResizeObserver to track the container's width
   useEffect(() => {
-    let observer = null;
-    function handleResize() {
-      clearTimeout(resizeTimeoutRef.current);
-      resizeTimeoutRef.current = setTimeout(() => {
-        function findButton() {
-          const button = document.querySelector(".register-button");
-          if (button) {
-            console.log(button.clientWidth);
-            setButtonWidth(button.clientWidth);
-          }
-        }
-        findButton(); // Try finding the button immediately
-        observer = new MutationObserver(findButton);
-        observer.observe(document.body, { childList: true, subtree: true });
-        return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
-      }, 40);
-    }
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      if (resizeTimeoutRef.current)
-        clearTimeout(resizeTimeoutRef.current);
+    if (!googleButtonDiv)
+      return;
+    // Function to update the width based on the container's size
+    const updateWidth = () => {
+      if (googleButtonDiv) {
+        setButtonWidth(googleButtonDiv.clientWidth); // Set width dynamically based on container size
+      }
     };
-  }, []);
+    // Create a ResizeObserver to track width changes
+    const resizeObserver = new ResizeObserver(() => {
+      updateWidth(); // Call the updateWidth function when the container is resized
+    });
+    // Observe the googleButtonDiv
+    resizeObserver.observe(googleButtonDiv);
+    // Initial width update
+    updateWidth();
+    // Cleanup the observer when the component unmounts or googleButtonDiv changes
+    return () => resizeObserver.disconnect();
+  }, [googleButtonDiv]);
   useEffect(() => {
     const cb = () => {
       // @ts-expect-error
@@ -60,7 +52,6 @@ export function useGoogleSignIn(props) {
   useEffect(() => {
     if (!googleButtonDiv || !loaded)
       return;
-    googleButtonDiv.id = "google-button";
     //@ts-expect-error
     google.accounts.id.renderButton(googleButtonDiv, {
       theme: "outline",

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

@@ -142,13 +142,6 @@ export class PortalGoogleRegistrationForm {
     this.googleButtonText = "signup_with";
     withHooks(this);
   }
-  componentDidLoad() {
-    var _a;
-    const button = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".register-button");
-    if (button && this.onButtonRef) {
-      this.onButtonRef(button); // Pass the ref to google-button
-    }
-  }
   disconnectedCallback() { }
   render() {
     const { states, callbacks, refs } = isDemo()
@@ -205,6 +198,7 @@ export class PortalGoogleRegistrationForm {
       }, refs: refs }));
   }
   static get is() { return "sqm-portal-google-registration-form"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "nextPage": {
       "type": "string",
@@ -837,44 +831,6 @@ export class PortalGoogleRegistrationForm {
           }],
         "text": ""
       }
-    },
-    "el": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "onButtonRef": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(el: HTMLButtonElement) => void",
-        "resolved": "(el: HTMLButtonElement) => void",
-        "references": {
-          "HTMLButtonElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
     }
   }; }
   static get states() { return {

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

@@ -76,6 +76,6 @@ export function PortalRegistrationFormView(props) {
         : [])))),
       content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.disabled, exportparts: "base: primarybutton-base", type: "primary", className: "register-button" }, content.submitLabel || "Register"),
+        h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }

package/dist/esm/{GenericTableView-d2f2d093.js → GenericTableView-7b9087af.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-83f90fa1.js';
 

package/dist/esm/{ShadowViewAddon-4033c78f.js → ShadowViewAddon-eba44767.js}

@@ -1,18 +1,18 @@
-import { h, c as Host, d as getAssetPath, g as getElement } from './index-b3a06de8.js';
-import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-20ad2b5f.js';
-import { i as intl } from './global-36b3ed51.js';
-import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-66cfdb64.js';
+import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-bedc4329.js';
+import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-a2989d3c.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-cc9a4bd1.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-b060162f.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { u as useChildElements } from './useChildElements-49ed44ac.js';
-import { l as luxon } from './luxon-793b7f13.js';
-import { T as TextSpanView } from './sqm-text-span-view-168e4245.js';
+import { u as useChildElements } from './useChildElements-38c11321.js';
+import { l as luxon } from './luxon-8d51c92b.js';
+import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-f99b3808.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-f0b1ccfc.js';
+import { a as isValidColor, b as isMobile } from './utilities-863d06d1.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },