@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -1,23 +1,24 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { GeneralLoadingView } from "../TaxForm.stories";
-import { FORM_STEPS } from "../sqm-tax-and-cash/data";
-import { formatErrorMessage, validateBillingField } from "../utils";
+// import { GeneralLoadingView } from "../TaxForm.stories";
+import { FORM_STEPS } from "../data";
 import { PHONE_EXTENSIONS } from "../phoneExtensions";
+import LoadingView from "../sqm-tax-and-cash/LoadingView";
+import { formatErrorMessage, validateBillingField } from "../utils";
 const style = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-text)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -48,9 +49,6 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -59,28 +57,8 @@ const style = {
       borderRadius: "50%",
     },
   },
-  AlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-      padding: "0 16px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  PartnerAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-      padding: "0 16px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -89,7 +67,7 @@ const style = {
     gap: "4px",
     "& p": {
       fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-input-label-color)",
+      color: "var(--sqm-input-label-color)",
       fontWeight: "var(--sl-font-weight-semibold)",
     },
   },
@@ -114,11 +92,15 @@ const vanillaStyle = `
        padding: 0;
        box-sizing: border-box;
     }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
 
     p {
       line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
+      font-size: var(--sl-font-size-small);
     }
 
     sl-radio-group::part(base) {
@@ -129,7 +111,159 @@ const vanillaStyle = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+
+
+*::part(primarybutton-base){
+  background-color: var(--sqm-primary-button-background);
+  color: var(--sqm-primary-button-color);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
+}
+
+*::part(primarybutton-base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
+}
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
+}
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(secondarybutton-base):hover{
+  background: var(--sqm-secondary-button-background-hover);
+}
+
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-dropdown::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-thickness, 1px);
+      border-style: solid; 
+      border-color: var(--sqm-input-border-color, #ccc); 
+    }
+
+
+    sl-select::part(menu) {
+      background: var(--sqm-input-background, inherit);
+      color: var(--sqm-input-color, inherit);
+      border:none;
+    }
+
+    sl-menu-item::part(base) {
+      color: var(--sqm-input-color);
+    }
+
+     sl-menu-item::part(base):hover {
+      background-color: var(--sqm-input-border-color-hover);
+    }
+
+    sl-select::part(panel) {
+      border-radius: var(--sqm-border-radius-normal);
+    }
+
+    sl-select::part(help-text) {
+      color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
+    }
+
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-checkbox::part(label){
+      color: var(--sqm-text);
+    }
+
+    sl-checkbox[checked]::part(control){
+      background-color: var(--sqm-input-border-color-focus);
+    }
+
+    sl-checkbox[checked]::part(checked-icon){
+      color: var(--sqm-input-background);
+    }
+`;
 export const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
@@ -159,18 +293,15 @@ export const UserInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     states.loadingError && (h("div", null,
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.AlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h("strong", null, text.error.loadingErrorAlertHeader),
-        h("br", null),
-        intl.formatMessage({
+      h("sqm-form-message", { type: "error" },
+        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        h("p", { part: "alert-description" }, intl.formatMessage({
           id: "loadingErrorAlertDescription",
           defaultMessage: text.error.loadingErrorAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })),
-      h("br", null))),
-    states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
+        }))))),
+    states.loading ? (h(LoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
           !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -179,29 +310,25 @@ export const UserInfoFormView = (props) => {
           }, { step: states.step, count: FORM_STEPS }))),
           h("h3", null, text.personalInformation),
           h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h("strong", null, text.error.generalTitle),
-        h("br", null),
-        intl.formatMessage({
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
+        h("p", { part: "alert-title" }, text.error.generalTitle),
+        h("p", { part: "alert-description" }, intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
-      (states.isPartner || states.isUser) && (h("sl-alert", { type: "primary", open: true, class: sheet.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
-        h("sl-icon", { slot: "icon", name: "info-circle" }),
-        h("strong", null, text.isPartnerAlertHeader),
-        h("br", null),
-        intl.formatMessage({
+        })))),
+      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        h("p", { part: "alert-description" }, intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
+        })))),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
@@ -305,7 +432,7 @@ export const UserInfoFormView = (props) => {
               " - ",
               c.displayName)))),
           h("div", { class: classes.CheckboxWrapper },
-            h("sl-checkbox", { exportparts: "label: input-label, base: input-base", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+            h("sl-checkbox", { checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
                 e.target.value = e.target.checked;
               }, disabled: states.isPartner ? false : states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
             ((_u = formState.errors) === null || _u === void 0 ? void 0 : _u.allowBankingCollection) && (h("p", { class: classes.ErrorText }, formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js

@@ -1,9 +1,9 @@
 import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Host, Prop, State, h } from "@stencil/core";
+import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { UserInfoFormView } from "./sqm-user-info-form-view";
 import { useUserInfoForm } from "./useUserInfoForm";
 /**
@@ -183,13 +183,12 @@ export class TaxForm {
   }
   render() {
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h(Host, null,
-      h(UserInfoFormView, { data: props.data, 
-        // @ts-ignore
-        states: props.states, callbacks: {
-          ...props.callbacks,
-          onSubmit: props.onSubmit,
-        }, text: props.text, refs: props.refs })));
+    return (h(UserInfoFormView, { data: props.data, 
+      // @ts-ignore
+      states: props.states, callbacks: {
+        ...props.callbacks,
+        onSubmit: props.onSubmit,
+      }, text: props.text, refs: props.refs }));
   }
   static get is() { return "sqm-user-info-form"; }
   static get encapsulation() { return "shadow"; }
@@ -924,9 +923,10 @@ export class TaxForm {
 }
 function useDemoUserInfoForm(props) {
   const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
+  // @ts-ignore
   return deepmerge({
     setStep,
-    onSubmit: () => {
+    onSubmit: async () => {
       setStep("/2");
     },
     onRadioClick: () => { },

package/dist/collection/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.js

@@ -1,9 +1,9 @@
+import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { objectIsFull } from "../utils";
-import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
+import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { ADDRESS_REGIONS } from "../subregions";
+import { objectIsFull } from "../utils";
 export function useUserInfoForm(props) {
   var _a, _b, _c, _d;
   const currencyRef = useRef(undefined);
@@ -23,6 +23,10 @@ export function useUserInfoForm(props) {
   const [currencySearch, setCurrencySearch] = useState("");
   const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
   const [formErrors, setErrors] = useState({});
+  useEffect(() => {
+    // reset redirect hash
+    window.location.hash = "";
+  }, []);
   useEffect(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const user = data === null || data === void 0 ? void 0 : data.user;
@@ -155,8 +159,6 @@ export function useUserInfoForm(props) {
     });
     const nextStep = context.overrideNextStep || "/2";
     setStep(nextStep);
-    // reset redirect hash
-    window.location.hash = "";
   }
   const hasStates = ["ES", "AU", "US", "CA"].includes(userFormContext.countryCode);
   const regionObj = hasStates

package/dist/collection/components/views/copy-text-view.js

@@ -1,41 +1,6 @@
 import { h } from "@stencil/core";
 import { HostBlock } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  HostBlock: HostBlock,
-  inputStyle: {
-    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
-    "&::part(base)": { cursor: "pointer", overflow: "visible" },
-    width: "100%",
-  },
-  inputErrorStyle: {
-    "&::part(base)": {
-      border: "2px solid red",
-    },
-  },
-  ContainerDiv: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  containerStyle: {
-    display: "flex",
-    alignItems: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  errorTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-danger-500)",
-  },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
-};
 const vanillaStyle = `
   :host{
     display: block;   
@@ -58,10 +23,69 @@ const disabledStyles = `
     cursor: default;
   }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function CopyTextView(props) {
   const { buttonStyle = "icon" } = props;
+  const style = {
+    HostBlock: HostBlock,
+    inputStyle: {
+      "&::part(input)": {
+        textOverflow: "ellipsis",
+        width: "100%",
+        color: props.textColor || "var(--sl-input-color)",
+      },
+      "&::part(base)": {
+        "--sl-input-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        "--sl-input-border-color": "var(--sqm-border-color)",
+        "--sl-input-border-color-hover": "#999999",
+        "--sl-input-border-color-focus": "#999999",
+        "--sl-input-color-hover": "var(--sqm-input-color-hover)",
+        "--sl-input-color-focus": "var(--sqm-input-color-focus)",
+        "--sl-input-color-disabled": "var(--sqm-input-disabled-color)",
+        "--sl-input-background-color-focus": "var(--sqm-input-background)",
+        "--sl-input-background-color-hover": "var(--sqm-input-background)",
+        cursor: "pointer",
+        overflow: "visible",
+        borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        background: props.backgroundColor || "var(--sqm-input-background)",
+        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-input-border-color)"}`,
+      },
+      width: "100%",
+    },
+    icon: {
+      "&::part(base)": {
+        color: props.textColor || "var(--sqm-text)",
+      },
+    },
+    inputErrorStyle: {
+    // "&::part(base)": {
+    //   border: "1px solid red",
+    // },
+    },
+    ContainerDiv: {
+      display: "flex",
+      alignItems: "flex-start",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    containerStyle: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    errorTextStyle: {
+      margin: "0",
+      color: "var(--sqm-danger-color-text)",
+    },
+    notificationTextStyle: {
+      margin: "0",
+      color: "inherit",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const error = !props.loading && props.error;
   const inputText = error ? props.inputPlaceholderText : props.copyString;
   const disabled = error || props.loading || props.disabled;
@@ -70,7 +94,7 @@ export function CopyTextView(props) {
     : props.buttonStyle === "button-outside"
       ? "top"
       : "top-end";
-  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: `base: ${props.buttonType || "primary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
   return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,
@@ -80,7 +104,9 @@ export function CopyTextView(props) {
     h("div", { class: sheet.classes.containerStyle, style: {
         flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
       } },
-      h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "base: input-base, input: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+      h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, 
+        // exportparts="base: input-base, input: input-field"
+        value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
         buttonStyle === "icon" && copyButton,
         error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
       (buttonStyle === "button-outside" || buttonStyle === "button-below") &&

package/dist/collection/components/views/email-registration-view.js

@@ -43,7 +43,9 @@ export function EmailRegistrationView(props) {
   };
   const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return (h("div", { part: "sqm-base", class: sheet.classes.Wrapper, style: {
-      border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`,
+      border: `${content.hideBorder
+        ? "none"
+        : "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)"}`,
       backgroundColor: content.backgroundColor,
       "padding-top": `var(--sl-spacing-${content.paddingTop})`,
       "padding-right": `var(--sl-spacing-${content.paddingRight})`,

package/dist/collection/global/global.js

@@ -1,11 +1,11 @@
-import "@formatjs/intl-relativetimeformat/polyfill";
 import "@formatjs/intl-relativetimeformat/dist/locale-data/en";
-import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import { createIntl, createIntlCache } from "@formatjs/intl";
 import "@formatjs/intl-pluralrules/dist/locale-data/en";
-import "babel-polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import { getEnvironmentSDK, setUseHostImplementation, } from "@saasquatch/component-boilerplate";
 import { useHost } from "@saasquatch/stencil-hooks";
-import { setUseHostImplementation } from "@saasquatch/component-boilerplate";
-import { createIntl, createIntlCache } from "@formatjs/intl";
+import "babel-polyfill";
 import debugFn from "debug";
 setUseHostImplementation(useHost);
 const debug = debugFn("sq:global");
@@ -13,7 +13,7 @@ const cache = createIntlCache();
 export const intl = createIntl({
   locale: "en",
 }, cache);
-import { SlAlert, SlAnimation, SlAvatar, SlBadge, SlButton, SlButtonGroup, SlCard, SlCheckbox, SlColorPicker, SlDetails, SlDialog, SlDrawer, SlDropdown, SlForm, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuDivider, SlMenuItem, SlMenuLabel, SlProgressBar, SlProgressRing, SlRadio, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlResponsiveEmbed, SlSelect, SlSkeleton, SlSpinner, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, setBasePath, registerIconLibrary, } from "@saasquatch/shoelace";
+import { SlAlert, SlAnimation, SlAvatar, SlBadge, SlButton, SlButtonGroup, SlCard, SlCheckbox, SlColorPicker, SlDetails, SlDialog, SlDrawer, SlDropdown, SlForm, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuDivider, SlMenuItem, SlMenuLabel, SlProgressBar, SlProgressRing, SlRadio, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlResponsiveEmbed, SlSelect, SlSkeleton, SlSpinner, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, registerIconLibrary, setBasePath, } from "@saasquatch/shoelace";
 try {
   setBasePath("/dist/shoelace");
   // SlAlert.register();
@@ -71,10 +71,25 @@ catch (error) {
   debug("components already registered");
 }
 import { insertCSS } from "../insertcss";
-import CSS from "./styles";
-try {
-  insertCSS(CSS);
-}
-catch (error) {
-  debug(error);
+import { insertFont } from "../insertfont";
+import { parseBrandingConfig } from "./styles";
+const applyStyles = (css, font) => {
+  try {
+    insertCSS(css);
+    insertFont(font);
+  }
+  catch (error) {
+    debug(error);
+  }
+};
+if (getEnvironmentSDK().type === "None") {
+  window.addEventListener("message", ({ data }) => {
+    if (!(data === null || data === void 0 ? void 0 : data.brandingConfig))
+      return;
+    window.SquatchBrandingConfig = data.brandingConfig;
+    const { styles, font } = parseBrandingConfig(data.brandingConfig);
+    applyStyles(styles, font);
+  });
 }
+const { styles, font } = parseBrandingConfig(window.SquatchBrandingConfig);
+applyStyles(styles, font);

package/dist/collection/global/mixins.js

@@ -24,10 +24,10 @@ export const HostBlock = {
 };
 export const P = {
   "font-size": "var(--sl-font-size-small)",
-  color: "var(--sl-color-gray-800)",
+  color: "var(--sqm-text)",
   "margin-top": "0px",
   "&.Subtitle": {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0px",
   },
 };
@@ -62,20 +62,20 @@ export const ErrorStyles = {
   },
 };
 export const Wrapper = {
-  "box-sizing": "border-box",
+  boxSizing: "border-box",
   width: "100%",
-  "max-width": "var(--sqm-content-max-width)",
+  maxWidth: "var(--sqm-content-max-width)",
   height: "auto",
-  "background-color": "var(--sqm-content-background)",
   display: "flex",
   padding: "var(--sl-spacing-xxx-large)",
-  border: "1px solid #eaeaea",
-  "border-radius": "8px",
+  background: "var(--sqm-portal-background)",
+  border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+  borderRadius: "var(--sqm-border-radius-normal)",
 };
 export const AuthWrapper = {
   margin: "auto",
   ...Wrapper,
-  "max-width": "500px",
+  maxWidth: "500px",
   ...Column,
   ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
 };