@saasquatch/mint-components 1.15.0-42 → 1.15.0-43

package/dist/esm/{sqm-base-registration-form-view-193f1721.js → sqm-base-registration-form-view-d732a5df.js}

@@ -1,7 +1,7 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn, H as HostBlock, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
-import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
+import { T as TextSpanView } from './sqm-text-span-view-cd3902e5.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/sqm-big-stat_42.entry.js

@@ -1,26 +1,27 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
-import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-20ad2b5f.js';
-import { i as intl } from './global-16971a34.js';
-import { i as isDemo, _ as _$1, d as dist, J, H, $ as $e, w as wn, B, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, Q as Qe, k as kn } from './index.module-d49ae5e7.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
+import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-632fb2fa.js';
+import { i as isDemo, _ as _$1, d as dist, J, H, $ as $e, w as wn, B, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, Q as Qe, k as kn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './useReferralCodes-0b798295.js';
+import './useReferralCodes-8f75921a.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-38c7c3d5.js';
-import { a as useRequestRerender } from './re-render-789f9123.js';
-import { u as useChildElements } from './useChildElements-0ca9a015.js';
-import './luxon-793b7f13.js';
-import './sqm-text-span-view-4c17b8c9.js';
+import { C as CopyTextView } from './copy-text-view-4a207b17.js';
+import { a as useRequestRerender } from './re-render-cc945f38.js';
+import { u as useChildElements } from './useChildElements-7945ae56.js';
+import './luxon-8d51c92b.js';
+import './sqm-text-span-view-cd3902e5.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-2db047e9.js';
-import { u as usePortalLogin, P as PortalLoginView } from './usePortalLogin-2b813acc.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-d6f33135.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
+import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { i as isEmpty } from './utilities-6341d9fd.js';
-import { b as useDemoBigStat, Q as useBigStat, B as BigStatView, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, V as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-173ce794.js';
-import './sqm-portal-container-view-f0b1ccfc.js';
-import { u as usePayoutStatus } from './usePayoutStatus-3768c8c3.js';
+import { i as isEmpty } from './utilities-5b0ca040.js';
+import { u as useDemoBigStat, Q as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, V as demoRewardExchange, i as RewardExchangeView, G as useShareButton, a as ShareButtonView, J as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-d8cfd6c7.js';
+import './sqm-portal-container-view-1683ae32.js';
+import { u as usePayoutStatus } from './usePayoutStatus-fed17fc9.js';
 
 /**
  *
@@ -34,325 +35,50 @@ import { u as usePayoutStatus } from './usePayoutStatus-3768c8c3.js';
  *
  */
 //
-const Default = null;
-const Netflix = {
-  font: {
-    font: "Netflix Sans, Arial, sans-serif",
-    textColor: "white",
-    secondaryTextColor: "#B3B3B3",
-  },
-  border: {
-    color: "#333333",
-    radius: "4px",
-    thickness: "1px",
-  },
-  color: {
-    primaryColor: "#E50914",
-    background: "#101010",
-    accentColorShades: {
-      text: "#E50914",
-      icon: "#E50914",
-      border: "#E50914",
-      background: "#300609",
-      iconAndBadge: "#E50914",
-    },
-    success: {
-      text: "#66BB6A",
-      icon: "#4CAF50",
-      border: "#4CAF50",
-      background: "#1B5E20",
-      iconAndBadge: "#4CAF50",
-    },
-    warning: {
-      text: "#FFCA28",
-      icon: "#FFA726",
-      border: "#FFA726",
-      background: "#F57C00",
-      iconAndBadge: "#FFA726",
-    },
-    critical: {
-      text: "#EF9A9A",
-      icon: "#E50914",
-      border: "#E50914",
-      background: "#B71C1C",
-      iconAndBadge: "#E50914",
-    },
-    informative: {
-      text: "#64B5F6",
-      icon: "#42A5F5",
-      border: "#42A5F5",
-      background: "#1976D2",
-      iconAndBadge: "#42A5F5",
-    },
-    neutral: {
-      text: "white",
-      icon: "#B3B3B3",
-      border: "#333333",
-      background: "#222222",
-      iconAndBadge: "#B3B3B3",
-    },
-  },
-  primaryButton: {
-    buttonColor: "#E50914",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#CC0000",
-    hoverTextColor: "#FFFFFF",
-  },
-  secondaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#B3B3B3",
-    borderRadius: "4px",
-    hoverColor: "#333333",
-    hoverTextColor: "#FFFFFF",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-  },
-  inputs: {
-    background: "#222222",
-    borderColor: "#B3B3B3",
-    borderRadius: "4px",
-    textColor: "white",
-    labelColor: "#B3B3B3",
-    borderThickness: "1px",
-    disabledBackground: "#333333",
-    disabledTextColor: "#777777",
-    labelFontSize: "14px",
-    focusBorderColor: "#E50914",
-    hoverBorderColor: "#777777",
-  },
-};
-const Amazon = {
-  font: {
-    font: "Amazon Ember, Arial, sans-serif",
-    textColor: "#2f2f2f",
-    secondaryTextColor: "#565959",
-  },
-  border: {
-    color: "#d5d9d9",
-    radius: "4px",
-    thickness: "1px",
-  },
-  color: {
-    primaryColor: "#FF9900",
-    background: "#ffffff",
-    accentColorShades: {
-      text: "#FF9900",
-      icon: "#FF9900",
-      border: "#FFBF66",
-      background: "#FFF4DD",
-      iconAndBadge: "#FF9900",
-    },
-    success: {
-      text: "#198754",
-      icon: "#28A745",
-      border: "#BCE8B2",
-      background: "#D4EDDA",
-      iconAndBadge: "#28A745",
-    },
-    warning: {
-      text: "#856404",
-      icon: "#FFC107",
-      border: "#FFEBA2",
-      background: "#FFF3CD",
-      iconAndBadge: "#FFC107",
-    },
-    critical: {
-      text: "#721C24",
-      icon: "#DC3545",
-      border: "#F5C6CB",
-      background: "#F8D7DA",
-      iconAndBadge: "#DC3545",
-    },
-    informative: {
-      text: "#004085",
-      icon: "#007BFF",
-      border: "#B8DAFF",
-      background: "#CCE5FF",
-      iconAndBadge: "#007BFF",
-    },
-    neutral: {
-      text: "#232F3E",
-      icon: "#565959",
-      border: "#D5D9D9",
-      background: "#F0F2F2",
-      iconAndBadge: "#565959",
-    },
-  },
-  primaryButton: {
-    buttonColor: "#FF9900",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "7px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#EB9100",
-    hoverTextColor: "#FFFFFF",
-  },
-  secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#232F3E",
-    buttonBorderColor: "#888C8C",
-    borderRadius: "7px",
-    hoverColor: "#F0F2F2",
-    hoverTextColor: "#232F3E",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#007185",
-    borderRadius: "7px",
-  },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#D5D9D9",
-    borderRadius: "3px",
-    textColor: "#2f2f2f",
-    labelColor: "#565959",
-    borderThickness: "1px",
-    disabledBackground: "#EAEDED",
-    disabledTextColor: "#888C8C",
-    labelFontSize: "14px",
-    focusBorderColor: "#007185",
-    hoverBorderColor: "#A2A2A2",
-  },
-};
-const Spotify = {
-  font: {
-    textColor: "white",
-  },
-  color: {
-    background: "#121212",
-    accentColorShades: {
-      iconAndBadge: "#1ed760",
-    },
-  },
-  primaryButton: {
-    buttonColor: "#1ed760",
-    buttonTextColor: "#121212",
-    borderRadius: "30px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#1DB954",
-    hoverTextColor: "#121212",
-  },
-  secondaryButton: {
-    buttonColor: "#191414",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#FFFFFF",
-    borderRadius: "30px",
-    hoverColor: "#282828",
-    hoverTextColor: "#121212",
-  },
-  inputs: {
-    background: "#121212",
-    borderColor: "#7c7c7c",
-    borderThickness: "1px",
-    borderRadius: "30px",
-    textColor: "#fff",
-    focusBorderColor: "white",
-    labelColor: "white",
-    hoverBorderColor: "white",
-    labelFontSize: "18px",
-    disabledTextColor: "white",
-    disabledBackground: "#303030",
-  },
-};
-const Google = {
-  color: {
-    primaryColor: "#4285F4",
-    background: "#FFFFFF",
-    accentColorShades: {
-      text: "#1A73E8",
-      border: "#8AB4F8",
-      background: "#E8F0FE",
-      iconAndBadge: "#4285F4",
-    },
-    success: {
-      text: "#044e1d",
-      border: "#A8DCD7",
-      background: "#E6F4EA",
-      iconAndBadge: "#34A853",
-    },
-    warning: {
-      text: "#996a3d",
-      border: "#FCD667",
-      background: "#FFF7EE",
-      iconAndBadge: "#FBBC04",
-    },
-    critical: {
-      text: "#760b09",
-      border: "#F28B82",
-      background: "#FCE8E6",
-      iconAndBadge: "#EA4335",
-    },
-    informative: {
-      text: "#01368c",
-      border: "#A8DCD7",
-      background: "#E8F0FE",
-      iconAndBadge: "#4285F4",
-    },
-    neutral: {
-      text: "#202124",
-      border: "#DADCE0",
-      background: "#F8F9FA",
-      iconAndBadge: "#5F6368",
-    },
-  },
-  border: {
-    color: "#DADCE0",
-    radius: "8px",
-    thickness: "1px",
-  },
-  font: {
-    font: "Roboto, Arial, sans-serif",
-    textColor: "#212124",
-    secondaryTextColor: "#5F6368",
-  },
-  primaryButton: {
-    buttonColor: "#4285F4",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#3C7CD1",
-    hoverTextColor: "#FFFFFF",
-  },
-  secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#4285F4",
-    buttonBorderColor: "#DADCE0",
-    borderRadius: "4px",
-    hoverColor: "#E8F0FE",
-    hoverTextColor: "#4285F4",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#4285F4",
-    borderRadius: "4px",
-  },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#DADCE0",
-    borderThickness: "1px",
-    borderRadius: "8px",
-    textColor: "#202124",
-    focusBorderColor: "#4285F4",
-    labelColor: "#5F6368",
-    hoverBorderColor: "#9AA0A6",
-    labelFontSize: "12px",
-    disabledTextColor: "#9AA0A6",
-    disabledBackground: "#F1F3F4",
-  },
-};
+const Default = `
+ // No CSS
+`;
+const Netflix = `
+:root{
+    --sqm-portal-background: #101010 !important;
+      --sqm-text: white;
+
+          --sqm-accent-color-icon: #E50914;
+    }
+`;
+const Amazon = `
+:root{
+    --sqm-portal-background: #ffffff !important;
+    --sqm-text: #2f2f2f;
+    --sqm-border-color: #d5d9d9;
+
+    --sqm-accent-color-icon: #FF9900;
+}
+`;
+const Spotify = `
+:root{
+    --sqm-portal-background: #121212 !important;
+      --sqm-text: white;
+}
+`;
+const Google = `
+:root{
+    --sqm-portal-background: #ffffff !important;
+    --sqm-text: #212124;
+    --sqm-border-color: #E0E0E0;
+
+        --sqm-accent-color-icon: #4285F4;
+    
+}
+`;
 
 const Themes = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Default: Default,
-  Netflix: Netflix,
-  Amazon: Amazon,
-  Spotify: Spotify,
-  Google: Google
+    __proto__: null,
+    Default: Default,
+    Netflix: Netflix,
+    Amazon: Amazon,
+    Spotify: Spotify,
+    Google: Google
 });
 
 const BigStat = class {
@@ -510,12 +236,13 @@ const BrandComponent = class {
   }
 };
 
-const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
-const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
 const SqmBrandSelector = class {
+  // State to keep track of the currently selected brand
+  // Array of brand objects, each containing a name and an image URL.
+  // Using placeholder images for now. In a real application, you would
+  // replace these with actual logo URLs or local assets.
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.selectedBrand = "Netflix";
     this.brands = [
       {
         name: "Netflix",
@@ -534,37 +261,18 @@ const SqmBrandSelector = class {
         logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
       },
     ];
-    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
-    const initialBrandName = storedBrand;
-    this.selectedBrand = initialBrandName;
-    // Initialize window.SquatchBrandingConfig based on the loaded brand
-    const initialConfig = Themes[initialBrandName] || Netflix;
-    window.SquatchBrandingConfig = initialConfig;
-    const event = new CustomEvent("brandingConfigUpdated", {
-      detail: window.SquatchBrandingConfig,
-    });
-    window.dispatchEvent(event);
-  }
-  componentDidLoad() {
-    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
-    const initialBrandName = storedBrand;
-    this.selectedBrand = initialBrandName;
+    h(this); // Initialize hooks for this component instance
   }
   disconnectedCallback() { }
-  updateBrand(brandName) {
-    this.selectedBrand = brandName;
-    const configToSet = Themes[brandName] || Netflix;
-    const brandConfigString = JSON.stringify(configToSet);
-    localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName);
-    localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString);
-    window.SquatchBrandingConfig = configToSet;
-    window.location.reload();
-    const event = new CustomEvent("brandingConfigUpdated", {
-      detail: window.SquatchBrandingConfig,
-    });
-    window.dispatchEvent(event);
-  }
+  // Handler function for when a brand logo is clicked
+  // private handleBrandClick = (brandName: string) => {
+  // };
   render() {
+    const [selectedBrand, setSelectedBrand] = useState("Default");
+    const theme = Themes[selectedBrand];
+    const handleBrandClick = (brandName) => {
+      setSelectedBrand(brandName);
+    };
     return (h$1(Host, null, h$1("style", null, `
           @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 
@@ -578,14 +286,13 @@ const SqmBrandSelector = class {
             border-radius: 18px; 
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
             width: 100%;
-            max-width: 350px;
+            max-width: 500px;
             overflow: hidden;
-            padding: 10px;
+            padding: 20px 10px;
             position: absolute;
-            bottom: 0;
+            top: 0;
             right: 0;
             z-index: 999999;
-            border: 1px solid #ccc;
           }
 
           .card-heading {
@@ -614,7 +321,7 @@ const SqmBrandSelector = class {
             align-items: center;
             justify-content: center;
             flex: 1;
-            padding: 4px 8px; /* Fixed spacing syntax */
+            padding 4px 8px
             cursor: pointer;
             transition: all 300ms ease-in-out;
             border-radius: 9999px;
@@ -690,7 +397,9 @@ const SqmBrandSelector = class {
                   height: 1.8rem; /* Slightly smaller on mobile */
               }
           }
-          `), h$1("div", { class: "card-container" }, h$1("h2", { class: "card-heading" }, "Select Branding"), h$1("div", { class: "segmented-control-container" }, this.brands.map((brand) => (h$1("div", { key: brand.name, class: `brand-segment ${this.selectedBrand === brand.name ? "active" : ""}`, onClick: () => this.updateBrand(brand.name) }, h$1("img", { src: brand.logoUrl, alt: `${brand.name} Logo`, class: "brand-logo", onError: (e) => {
+          `), h$1("style", null, theme), h$1("div", { class: "card-container" }, h$1("h2", { class: "card-heading" }, "Select Branding"), h$1("div", { class: "segmented-control-container" }, this.brands.map((brand) => (
+    // Individual brand segment/pill
+    h$1("div", { key: brand.name, class: `brand-segment ${selectedBrand === brand.name ? "active" : ""}`, onClick: () => handleBrandClick(brand.name) }, h$1("img", { src: brand.logoUrl, alt: `${brand.name} Logo`, class: "brand-logo", onError: (e) => {
         e.target.src =
           "https://placehold.co/80x40/cccccc/000000?text=Logo";
       } }))))))));
@@ -3349,7 +3058,7 @@ const PortalLogin = class {
     const content = {
       forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("sl-button", { exportparts: "base: tertiarybutton-base", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -3511,7 +3220,7 @@ function usePortalRegister(props) {
 const PortalRegister = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ignored = false;
+    this.ignored = true;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -3955,6 +3664,12 @@ const ReferralCard = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean

package/dist/esm/{sqm-close-button-view-2fa57229.js → sqm-close-button-view-bc2bc10e.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 { H as HostBlock } from './mixins-f750863a.js';
 

package/dist/esm/sqm-close-button.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { n as h } from './stencil-hooks.module-20ad2b5f.js';
-import { g as getEnvironmentSDK } from './index.module-d49ae5e7.js';
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { n as h } from './stencil-hooks.module-4bc38af4.js';
+import { g as getEnvironmentSDK } from './index.module-89a79f66.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { C as CloseButtonView } from './sqm-close-button-view-2fa57229.js';
+import { C as CloseButtonView } from './sqm-close-button-view-bc2bc10e.js';
 
 const CloseButton = class {
   constructor(hostRef) {