@saasquatch/mint-components 1.15.0-99 → 1.16.0-1

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -16,6 +16,13 @@ const style = {
     flexDirection: "column",
     maxWidth: "320px",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "&::part(message)": {},
+  },
   ContinueButton: {
     width: "100%",
     maxWidth: "100px",
@@ -34,11 +41,11 @@ const style = {
   },
   ErrorInput: {
     "&::part(base)": {
-      border: "var(--sqm-border-thickness) solid var(--sqm-danger-color-border)",
-      borderRadius: "var(--sqm-input-border-radius)",
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sqm-danger-color-text)",
+      color: "var(--sl-color-danger-500)",
     },
   },
 };
@@ -49,139 +56,6 @@ const vanillaStyle = `
 :host([hidden]): {
   display: none;
 }
-
-a {
-  color: inherit;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-*::part(primarybutton-base),
-sl-button[type="primary"]::part(base) {
-  font-family: var(--sqm-primary-font);
-  width: 100%;
-  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,
-sl-button[type="primary"]::part(base):hover{
-  background-color: var(--sqm-primary-button-background-hover);
-  border-color: var(--sqm-primary-button-border-color-hover);
-  color: var(--sqm-primary-button-color-hover);
-}
-
-
-*::part(primarybutton-base):focus,
-sl-button[type="primary"]::part(base):focus {
-  box-shadow: none;
-}
-
-*::part(secondarybutton-base),
-sl-button[type="secondary"]::part(base) {
-font-family: var(--sqm-primary-font);
-  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,
-sl-button[type="secondary"]::part(base):hover {
-  background-color: var(--sqm-secondary-button-background-hover);
-  color: var(--sqm-secondary-button-color-hover);
-  border-color: var(--sqm-secondary-button-border-color-hover);
-}
-
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-family: var(--sqm-primary-font);
-  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);
-}
-
-*::part(input-base), *::part(select-base), *::part(textarea-base){
-  font-family: var(--sqm-primary-font);
-  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);
-}
-
-*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
-  border-color: var(--sqm-border-color-hover);
-}
-
-*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
-  border-color: var(--sqm-border-color-focus);
-}
-
-sqm-name-fields::part(input-base) {
-  font-family: var(--sqm-primary-font);
-  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);
-}
-
-sl-input::part(base):focus,
-sl-select::part(form-control-wrapper):focus,
-sl-textarea::part(textarea-label):focus {
-  border-color: var(--sqm-border-color-focus);
-}
-
-*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
-  background: var(--sqm-input-disabled-background, #f5f5f5);
-  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
-}
-
-*::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;
-}
-
-*::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;
-}
-
-*::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;
-}
-
-*::part(input)::placeholder,
-*::part(select)::placeholder, 
-*::part(textarea)::placeholder {
-  font-family: var(--sqm-primary-font);
-  color: var(--sqm-text-subdued);
-}
-
-*::part(input)::-webkit-input-placeholder,
-*::part(select)::-webkit-input-placeholder,
-*::part(textarea)::-webkit-input-placeholder {
-  font-family: var(--sqm-primary-font);
-  color: var(--sqm-text-subdued);
-}
-
-*::part(input)::-moz-placeholder,
-*::part(select)::-moz-placeholder,
-*::part(textarea)::-moz-placeholder {
-  font-family: var(--sqm-primary-font);
-  opacity: 1; /* Firefox adds an opacity to placeholders by default */
-  color: var(--sqm-text-subdued);
-}
-
-*::part(input)::-ms-input-placeholder,
-*::part(select)::-ms-input-placeholder,
-*::part(textarea)::-ms-input-placeholder {
-  font-family: var(--sqm-primary-font);
-  color: var(--sqm-text-subdued);
-}
-
-
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -197,8 +71,10 @@ export function WidgetEmailVerificationView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.sendCodeError && (h("sqm-form-message", { type: "error" },
-      h("p", { part: "alert-title" }, text.sendCodeErrorHeader),
+    states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("b", null, text.sendCodeErrorHeader),
+      h("br", null),
       intl.formatMessage({
         id: "sendCodeErrorDescription",
         defaultMessage: text.sendCodeErrorDescription,

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-controller.js

@@ -1,7 +1,7 @@
-import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
+import { useParentState } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, Host, Prop } from "@stencil/core";
+import { Component, h, Host } from "@stencil/core";
 import debugFn from "debug";
 import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
 const debug = debugFn("sq:widget-verification");
@@ -35,29 +35,23 @@ function useTemplateChildren({ parent, callback }) {
  * @uiName Widget Verification Controller
  * @slots [{"name":"not-verified","title":"Not Verified template"},{"name":"verified","title":"Verified template"}]
  * @canvasRenderer always-replace
+ * @exampleGroup Widget Verification
+ * @example Widget Verification Controller - <sqm-widget-verification-controller><template slot="not-verified"><sqm-widget-verification></sqm-widget-verification></template><template slot="verified"><sqm-tax-and-cash></sqm-tax-and-cash></template></sqm-widget-verification-controller>
  */
 export class WidgetVerificationController {
   constructor() {
-    /**
-     * @componentState { "title": "Not Verified", "slot": "not-verified", "props": { "isAuth": false } }
-     * @componentState { "title": "Verified", "slot": "verified", "props": { "isAuth": true } }
-     */
-    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    var _a;
     const [context, setContext] = useParentState({
       namespace: VERIFICATION_PARENT_NAMESPACE,
       initialValue: false,
     });
-    const props = JSON.parse(this.stateController);
-    const demoIsAuth = isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
     const [container, setContainer] = useState(undefined);
     const [slot, setSlot] = useState(undefined);
     const updateTemplates = useCallback(() => {
-      const isAuth = demoIsAuth || context;
+      const isAuth = context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -105,7 +99,7 @@ export class WidgetVerificationController {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context, demoIsAuth]);
+    }, [container, slot, context]);
     useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -114,7 +108,7 @@ export class WidgetVerificationController {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context, demoIsAuth]);
+    }, [slot, container, context]);
     return (h(Host, null,
       h("div", { ref: setSlot, style: { display: "contents" } },
         h("slot", { name: "not-verified" }),
@@ -123,30 +117,4 @@ export class WidgetVerificationController {
         h("slot", { name: "shown" }))));
   }
   static get is() { return "sqm-widget-verification-controller"; }
-  static get properties() { return {
-    "stateController": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{ \"title\": \"Not Verified\", \"slot\": \"not-verified\", \"props\": { \"isAuth\": false } }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Verified\", \"slot\": \"verified\", \"props\": { \"isAuth\": true } }",
-            "name": "componentState"
-          }],
-        "text": ""
-      },
-      "attribute": "state-controller",
-      "reflect": false,
-      "defaultValue": "\"{}\""
-    }
-  }; }
 }

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -1,14 +1,14 @@
 import { isDemo, useParentState, useSetParent, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
 import { useWidgetVerification } from "./useWidgetVerification";
 /**
  * @uiName Widget Verification Flow
+ * @exampleGroup Widget Verification
+ * @example Widget Verification Flow - <sqm-widget-verification></sqm-widget-verification>
  */
 export class WidgetVerification {
   constructor() {
@@ -107,12 +107,6 @@ export class WidgetVerification {
      * @uiGroup Code Verification Step
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    /**
-     * @undocumented
-     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" }
-     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" }
-     */
-    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -121,10 +115,10 @@ export class WidgetVerification {
     return extractProps(props, prefix);
   }
   render() {
-    const props = isDemo()
-      ? useDemoWidgetVerificationInternal(this)
+    const { showCode, onVerification, loading } = isDemo()
+      ? useDemoWidgetVerificationInternal()
       : useWidgetVerification();
-    if (props.loading)
+    if (loading)
       return h("sl-spinner", null);
     const generalText = this.getStepTextProps("general_");
     return (h("div", null,
@@ -134,7 +128,7 @@ export class WidgetVerification {
           fontSize: "var(--sl-font-size-medium)",
           margin: "0",
         } }, generalText.verifyEmailDescription),
-      props.showCode ? (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))))));
+      showCode ? (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
   }
   static get is() { return "sqm-widget-verification"; }
   static get encapsulation() { return "shadow"; }
@@ -522,37 +516,10 @@ export class WidgetVerification {
       "attribute": "code-step_network-error-message",
       "reflect": false,
       "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
-    },
-    "stateController": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "{ \"title\": \"Step 1: Enter email\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-email-verification\"], \"uiGroup\": \"Email Verification Step\" }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Step 2: Enter code\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"], \"uiGroup\": \"Code Verification Step\" }",
-            "name": "componentState"
-          }],
-        "text": ""
-      },
-      "attribute": "state-controller",
-      "reflect": false,
-      "defaultValue": "\"{}\""
     }
   }; }
 }
-function useDemoWidgetVerificationInternal(props) {
+function useDemoWidgetVerificationInternal() {
   const [showCode, setShowCode] = useParentState({
     namespace: SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -562,12 +529,8 @@ function useDemoWidgetVerificationInternal(props) {
     initialValue: undefined,
   });
   const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
-  const states = parseStates(props.stateController);
-  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
-    ? { ...prev, ...states[key] }
-    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   const onVerification = () => {
     setContext(true);
   };
-  return deepmerge({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
+  return { showCode, onVerification, loading: false };
 }

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { ErrorView } from "./sqm-tax-and-cash/ErrorView";
 import LoadingView from "./sqm-tax-and-cash/LoadingView";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "./subregions";
 import { taxTypeToName } from "./utils";
@@ -281,9 +282,7 @@ export const GeneralLoadingView = () => {
   return h(LoadingView, null);
 };
 export const GeneralErrorView = () => {
-  return (h("sqm-form-message", { type: "error" },
-    h("p", { part: "alert-title" }, "There was a problem loading your form"),
-    h("p", { part: "alert-description" }, "Please refresh the page and try again. If this problem continues, contact our support team.")));
+  return (h(ErrorView, { loadingErrorAlertHeader: "There was a problem loading your form", loadingErrorAlertDescription: "Please refresh the page and try again. If this problem continues, contact our support team." }));
 };
 // STEP ONE
 export const StepOne = () => {
@@ -1113,6 +1112,24 @@ export const TaxAndCashDashboardIdentityVerifcationFailedInternal = () => {
       },
     } }));
 };
+export const TaxAndCashDashboardW9ThresholdReached = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        payoutStatus: "OVER_W9_THRESHOLD",
+        veriffLoading: false,
+        canEditPayoutInfo: true,
+        status: null,
+        documentType: "W9",
+        documentTypeString: taxTypeToName("W9"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        notRegistered: true,
+        showNewFormDialog: false,
+        hasHold: false,
+      },
+    } }));
+};
 export const TaxAndCashDashboardNewTaxForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
@@ -1234,13 +1251,9 @@ export const TaxAndCashDashboardDisabled = () => {
       },
     } }));
 };
-// export const TaxAndCashTextProps = () => {
-//   return (
-//     <sqm-tax-and-cash
-//       demoData={{
-//         // @ts-ignore
-//         showTextProps: true,
-//       }}
-//     ></sqm-tax-and-cash>
-//   );
-// };
+export const TaxAndCashTextProps = () => {
+  return (h("sqm-tax-and-cash", { demoData: {
+      // @ts-ignore
+      showTextProps: true,
+    } }));
+};

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { FORM_STEPS } from "../data";
+import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 const style = {
   ModalTitleContainer: {
     display: "flex",
@@ -38,20 +38,45 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sqm-danger-color-icon)",
+    color: "var(--sl-color-danger-500)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
   DescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
+  },
+  SecondaryBtn: {
+    "&::part(base)": {
+      color: "var(--sl-color-gray-800) !important",
+    },
+  },
+  AlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
   },
   RadioContainer: {
     display: "flex",
     flexDirection: "column",
   },
+  PartnerAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
   Checkbox: {
     "&::part(control)": {
       borderRadius: "50% !important",
@@ -63,8 +88,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
-    borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderTop: "1px solid var(--sl-color-gray-300)",
+    borderBottom: "1px solid var(--sl-color-gray-300)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -86,20 +111,37 @@ const style = {
     width: "16px",
     height: "16px",
     borderRadius: "50%",
-    background: "var(--sqm-skeleton-background)",
+    background: "var(--sl-color-gray-200)",
   },
   SmallSkeleton: {
     width: "100px",
     height: "16px",
     borderRadius: "50px",
-    background: "var(--sqm-skeleton-background)",
+    background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
     width: "100%",
     maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
-    background: "var(--sqm-skeleton-background)",
+    background: "var(--sl-color-gray-200)",
+  },
+  InfoAlert: {
+    "&::part(base)": {
+      backgroundColor: "transparent",
+      borderTop: "none",
+      border: "none",
+    },
+    "&::part(message)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      padding: "10px",
+      height: "max-content",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-yellow-500)",
+    },
   },
   InfoWarningIcon: {
     height: "26px",
@@ -145,16 +187,20 @@ const vanillaStyle = `
       font-weight: 600
     }
 
+    p {
+      line-height: 18px;
+      color: var(--sl-color-gray-800);
+      font-size: var(--sl-font-size-small);
+    }
+
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      --sqm-input-border-color: var(--sqm-danger-color-border);
-      --sl-input-border-color: var(--sqm-danger-color-border);
-      --sl-input-border-color-hover: var(--sqm-danger-color-border);  
-      --sl-input-border-color-focus: var(--sqm-danger-color-background);
+      border: 1px solid var(--sl-color-danger-500);
+      border-radius: var(--sl-input-border-radius-medium);
     }
 
     .error-input::part(help-text) {
-      color: var(--sqm-danger-color-text);
+      color: var(--sl-color-danger-500) !important;
     }
     
   `;
@@ -206,16 +252,20 @@ export const BankingInfoFormView = (props) => {
         }, { step: states.step, count: FORM_STEPS }))),
         h("h3", { style: { fontSize: "24px" } }, text.taxAndPayouts),
         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),
+      ((_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.hideSteps && (h("sqm-form-message", { type: "info" },
-        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+      states.isPartner && !states.hideSteps && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
+        h("sl-icon", { slot: "icon", name: "info-circle" }),
+        h("strong", null, text.isPartnerAlertHeader),
+        h("br", null),
         intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
@@ -256,5 +306,5 @@ export const BankingInfoFormView = (props) => {
         h("sl-button", Object.assign({ type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading }, (states.hideSteps
           ? { onClick: callbacks.onModalOpen }
           : { submit: "submit" }), { exportparts: "base: primarybutton-base" }), text.continueButton),
-        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "secondary", onClick: callbacks.onBack }, text.backButton))))));
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };

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

@@ -4,13 +4,13 @@ import { useEffect } from "@saasquatch/universal-hooks";
 import { Component, Host, Prop, State, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { intl } from "../../../global/global";
-import { createStyleSheet } from "../../../styling/JSS";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../data";
+import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
 import { getFormMap } from "./formDefinitions";
 import { mockPaymentOptions } from "./mockData";
 import { BankingInfoFormView, } from "./sqm-banking-info-form-view";
 import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingInfoForm";
+import { createStyleSheet } from "../../../styling/JSS";
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components

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

@@ -3,8 +3,8 @@ import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import JSONPointer from "jsonpointer";
 import { intl } from "../../../global/global";
+import { FINANCE_NETWORK_SETTINGS_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { VERIFICATION_EVENT_KEY } from "../../sqm-widget-verification/keys";
-import { FINANCE_NETWORK_SETTINGS_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 // Hardcoded in Impact backend
 export const paypalFeeMap = {

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -14,7 +14,7 @@ const style = {
     gap: "10px",
     margin: "auto",
     textAlign: "center",
-    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    border: "1px solid var(--sl-color-gray-200)",
     justifyContent: "center",
   },
   MessageContainer: {
@@ -40,7 +40,7 @@ export const DocusignExpiredView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sqm-text)",
+          color: "var(--sl-color-neutral-500)",
         }, name: "clock" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignExpired)),
@@ -55,7 +55,7 @@ export const DocusignErrorView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sqm-text)",
+          color: "var(--sl-color-gray-500)",
         }, name: "exclamation-octagon" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignError)),