@saasquatch/mint-components 1.15.0-99 → 1.15.0

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

@@ -1,24 +1,23 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-// import { GeneralLoadingView } from "../TaxForm.stories";
-import { FORM_STEPS } from "../data";
-import { PHONE_EXTENSIONS } from "../phoneExtensions";
-import LoadingView from "../sqm-tax-and-cash/LoadingView";
+import { GeneralLoadingView } from "../TaxForm.stories";
+import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 import { formatErrorMessage, validateBillingField } from "../utils";
+import { PHONE_EXTENSIONS } from "../phoneExtensions";
 const style = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-icon)",
+      border: "1px solid var(--sl-color-danger-500)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-danger-500)",
     },
   },
   ErrorText: {
-    color: "var(--sqm-danger-color-icon)",
+    color: "var(--sl-color-danger-500)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -49,6 +48,9 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
+  DescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -57,8 +59,28 @@ 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(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -92,15 +114,11 @@ const vanillaStyle = `
        padding: 0;
        box-sizing: border-box;
     }
-    a {
-      color: var(--sqm-text);
-      color: inherit !important;
-      text-decoration: underline;
-    }
 
     p {
       line-height: 18px;
-      font-size: var(--sl-font-size-small);
+      color: var(--sl-color-gray-800);
+       font-size: var(--sl-font-size-small);
     }
 
     sl-radio-group::part(base) {
@@ -111,145 +129,7 @@ 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-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(label),
-    sl-select[disabled]::part(label),
-    sl-textarea[disabled]::part(label){
-      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
-    }
-
-    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;
-    }
-`;
+  `;
 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;
@@ -279,15 +159,18 @@ export const UserInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     states.loadingError && (h("div", null,
-      h("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
-        h("p", { part: "alert-description" }, intl.formatMessage({
+      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({
           id: "loadingErrorAlertDescription",
           defaultMessage: text.error.loadingErrorAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))))),
-    states.loading ? (h(LoadingView, null)) : (h("div", null,
+        })),
+      h("br", null))),
+    states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
           !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -296,25 +179,29 @@ 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("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.generalTitle),
-        h("p", { part: "alert-description" }, intl.formatMessage({
+      ((_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({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })))),
-      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
-        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
-        h("p", { part: "alert-description" }, intl.formatMessage({
+        }))),
+      (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({
           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({ 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) ? {
+          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) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }

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

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

@@ -1,6 +1,41 @@
 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;   
@@ -23,76 +58,10 @@ 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(--sqm-input-color)",
-        "--sl-input-label-color": props.textColor || "var(--sqm-input-color)",
-      },
-      "&::part(input-label)": {
-        "--sl-input-label-color": props.textColor || "var(--sqm-input-color)",
-      },
-      "&::part(base)": {
-        "--sl-input-label-color": props.textColor || "var(--sqm-input-color)",
-        "--sl-input-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
-        "--sl-input-background-color": props.backgroundColor || "var(--sqm-portal-background)",
-        "--sl-input-color": "var(--sqm-input-color)",
-        "--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-portal-background)",
-        "--sl-input-background-color-hover": "var(--sqm-portal-background)",
-        cursor: "pointer",
-        overflow: "visible",
-        borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
-        background: props.backgroundColor || "var(--sqm-portal-background)",
-        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
-      },
-      width: "100%",
-    },
-    icon: {
-      "&::part(base)": {
-        color: props.textColor || "var(--sqm-text)",
-      },
-    },
-    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(--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;
@@ -101,7 +70,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", { 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"))));
+  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"))));
   return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,

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

@@ -43,9 +43,7 @@ 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"
-        : "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)"}`,
+      border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`,
       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/dist/locale-data/en";
 import "@formatjs/intl-relativetimeformat/polyfill";
-import { createIntl, createIntlCache } from "@formatjs/intl";
-import "@formatjs/intl-pluralrules/dist/locale-data/en";
+import "@formatjs/intl-relativetimeformat/dist/locale-data/en";
 import "@formatjs/intl-pluralrules/polyfill";
-import { getEnvironmentSDK, setUseHostImplementation, } from "@saasquatch/component-boilerplate";
-import { useHost } from "@saasquatch/stencil-hooks";
+import "@formatjs/intl-pluralrules/dist/locale-data/en";
 import "babel-polyfill";
+import { useHost } from "@saasquatch/stencil-hooks";
+import { setUseHostImplementation } from "@saasquatch/component-boilerplate";
+import { createIntl, createIntlCache } from "@formatjs/intl";
 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, registerIconLibrary, setBasePath, } 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, setBasePath, registerIconLibrary, } from "@saasquatch/shoelace";
 try {
   setBasePath("/dist/shoelace");
   // SlAlert.register();
@@ -71,25 +71,10 @@ catch (error) {
   debug("components already registered");
 }
 import { insertCSS } from "../insertcss";
-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);
-  });
+import CSS from "./styles";
+try {
+  insertCSS(CSS);
+}
+catch (error) {
+  debug(error);
 }
-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(--sqm-text)",
+  color: "var(--sl-color-gray-800)",
   "margin-top": "0px",
   "&.Subtitle": {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
     margin: "0px",
   },
 };
@@ -62,20 +62,20 @@ export const ErrorStyles = {
   },
 };
 export const Wrapper = {
-  boxSizing: "border-box",
+  "box-sizing": "border-box",
   width: "100%",
-  maxWidth: "var(--sqm-content-max-width)",
+  "max-width": "var(--sqm-content-max-width)",
   height: "auto",
+  "background-color": "var(--sqm-content-background)",
   display: "flex",
   padding: "var(--sl-spacing-xxx-large)",
-  background: "var(--sqm-portal-background)",
-  border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
-  borderRadius: "var(--sqm-border-radius-normal)",
+  border: "1px solid #eaeaea",
+  "border-radius": "8px",
 };
 export const AuthWrapper = {
   margin: "auto",
   ...Wrapper,
-  maxWidth: "500px",
+  "max-width": "500px",
   ...Column,
   ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
 };