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

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

@@ -16,13 +16,6 @@ const style = {
     flexDirection: "column",
     maxWidth: "320px",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "&::part(message)": {},
-  },
   ContinueButton: {
     width: "100%",
     maxWidth: "100px",
@@ -41,11 +34,11 @@ const style = {
   },
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
-      borderRadius: "var(--sl-input-border-radius-medium)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-danger-color-border)",
+      borderRadius: "var(--sqm-input-border-radius)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
 };
@@ -56,6 +49,139 @@ 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();
@@ -71,10 +197,8 @@ export function WidgetEmailVerificationView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    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),
+    states.sendCodeError && (h("sqm-form-message", { type: "error" },
+      h("p", { part: "alert-title" }, text.sendCodeErrorHeader),
       intl.formatMessage({
         id: "sendCodeErrorDescription",
         defaultMessage: text.sendCodeErrorDescription,

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

@@ -1,7 +1,7 @@
-import { useParentState } from "@saasquatch/component-boilerplate";
+import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, Host } from "@stencil/core";
+import { Component, h, Host, Prop } from "@stencil/core";
 import debugFn from "debug";
 import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
 const debug = debugFn("sq:widget-verification");
@@ -35,23 +35,29 @@ 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": "Verify email", "slot": "not-verified", "props": { "isAuth": false } }
+     * @componentState { "title": "Tax and cash", "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 = context;
+      const isAuth = demoIsAuth || context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -99,7 +105,7 @@ export class WidgetVerificationController {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context]);
+    }, [container, slot, context, demoIsAuth]);
     useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -108,7 +114,7 @@ export class WidgetVerificationController {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
+    }, [slot, container, context, demoIsAuth]);
     return (h(Host, null,
       h("div", { ref: setSlot, style: { display: "contents" } },
         h("slot", { name: "not-verified" }),
@@ -117,4 +123,30 @@ 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\": \"Verify email\", \"slot\": \"not-verified\", \"props\": { \"isAuth\": false } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Tax and cash\", \"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,6 +107,12 @@ 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() { }
@@ -115,10 +121,10 @@ export class WidgetVerification {
     return extractProps(props, prefix);
   }
   render() {
-    const { showCode, onVerification, loading } = isDemo()
-      ? useDemoWidgetVerificationInternal()
+    const props = isDemo()
+      ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
-    if (loading)
+    if (props.loading)
       return h("sl-spinner", null);
     const generalText = this.getStepTextProps("general_");
     return (h("div", null,
@@ -128,7 +134,7 @@ export class WidgetVerification {
           fontSize: "var(--sl-font-size-medium)",
           margin: "0",
         } }, generalText.verifyEmailDescription),
-      showCode ? (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
+      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_"))))));
   }
   static get is() { return "sqm-widget-verification"; }
   static get encapsulation() { return "shadow"; }
@@ -516,10 +522,37 @@ 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() {
+function useDemoWidgetVerificationInternal(props) {
   const [showCode, setShowCode] = useParentState({
     namespace: SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -529,8 +562,12 @@ function useDemoWidgetVerificationInternal() {
     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 { showCode, onVerification, loading: false };
+  return deepmerge({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,5 +1,4 @@
 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";
@@ -282,7 +281,9 @@ export const GeneralLoadingView = () => {
   return h(LoadingView, null);
 };
 export const GeneralErrorView = () => {
-  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." }));
+  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.")));
 };
 // STEP ONE
 export const StepOne = () => {
@@ -1251,9 +1252,13 @@ export const TaxAndCashDashboardDisabled = () => {
       },
     } }));
 };
-export const TaxAndCashTextProps = () => {
-  return (h("sqm-tax-and-cash", { demoData: {
-      // @ts-ignore
-      showTextProps: true,
-    } }));
-};
+// export const TaxAndCashTextProps = () => {
+//   return (
+//     <sqm-tax-and-cash
+//       demoData={{
+//         // @ts-ignore
+//         showTextProps: true,
+//       }}
+//     ></sqm-tax-and-cash>
+//   );
+// };

package/dist/collection/components/tax-and-cash/{sqm-tax-and-cash/data.js → data.js}

@@ -19,6 +19,15 @@ export const GET_USER = gql `
         email
         countryCode
         customFields
+        rewards(limit: 1000) {
+          data {
+            statuses
+            partnerFundsTransfer {
+              id
+              status
+            }
+          }
+        }
         managedIdentity {
           uid
           email

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 "../sqm-tax-and-cash/data";
+import { FORM_STEPS } from "../data";
 const style = {
   ModalTitleContainer: {
     display: "flex",
@@ -38,45 +38,20 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   DescriptionText: {
-    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)",
-    },
+    color: "var(--sqm-text-subdued)",
   },
   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",
@@ -88,8 +63,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sl-color-gray-300)",
-    borderBottom: "1px solid var(--sl-color-gray-300)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -111,37 +86,20 @@ const style = {
     width: "16px",
     height: "16px",
     borderRadius: "50%",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   SmallSkeleton: {
     width: "100px",
     height: "16px",
     borderRadius: "50px",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   LargeSkeleton: {
     width: "100%",
     maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
-    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)",
-    },
+    background: "var(--sqm-skeleton-background)",
   },
   InfoWarningIcon: {
     height: "26px",
@@ -187,20 +145,16 @@ 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) {
-      border: 1px solid var(--sl-color-danger-500);
-      border-radius: var(--sl-input-border-radius-medium);
+      --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);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;
@@ -252,20 +206,16 @@ 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("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),
+      ((_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),
         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("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),
+      states.isPartner && !states.hideSteps && (h("sqm-form-message", { type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
@@ -277,7 +227,7 @@ export const BankingInfoFormView = (props) => {
         h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),
     h("div", null,
       h("div", { class: classes.CheckboxContainer }, states.loading && formState.paymentMethodChecked === undefined ? (getLoadingSkeleton(undefined)) : (h("div", { class: classes.RadioContainer },
-        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentMethodChecked === "toBankAccount", onInput: () => callbacks.setPaymentMethodChecked("toBankAccount"), disabled: states.disabled, id: "toBankAccount", name: "/toBankAccount" }, text.directlyToBankAccount)),
+        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentMethodChecked === "toBankAccount", onInput: () => callbacks.setPaymentMethodChecked("toBankAccount"), disabled: states.disabled, id: "toBankAccount", name: "/toBankAccount" }, text.directlyToBankAccount)),
         formState.paymentMethodChecked === "toBankAccount" && (h("div", { class: classes.InputContainer, style: states.hideBanking ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toBankAccount", slots.formInputsSlot.length + 3)
           : [
@@ -285,7 +235,7 @@ export const BankingInfoFormView = (props) => {
             slots.paymentMethodSlot,
             slots.formInputsSlot,
           ])),
-        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentMethodChecked === "toPayPalAccount", onInput: () => callbacks.setPaymentMethodChecked("toPayPalAccount"), disabled: states.disabled, id: "toPayPalAccount", name: "/toPayPalAccount" }, intl.formatMessage({
+        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentMethodChecked === "toPayPalAccount", onInput: () => callbacks.setPaymentMethodChecked("toPayPalAccount"), disabled: states.disabled, id: "toPayPalAccount", name: "/toPayPalAccount" }, intl.formatMessage({
           id: "paypal-input-label",
           defaultMessage: text.toPayPalAccount,
         }, { feeCap: states.feeCap }))),
@@ -294,11 +244,11 @@ export const BankingInfoFormView = (props) => {
           : slots.paypalInputSlot)),
         h("div", { style: { paddingTop: "24px", paddingBottom: "12px" } },
           h("h4", null, text.paymentSchedule)),
-        h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentScheduleChecked === "BALANCE_THRESHOLD", onInput: () => callbacks.setPaymentScheduleChecked("BALANCE_THRESHOLD"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "BALANCE_THRESHOLD" }, text.paymentScheduleBalanceThreshold),
+        h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentScheduleChecked === "BALANCE_THRESHOLD", onInput: () => callbacks.setPaymentScheduleChecked("BALANCE_THRESHOLD"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "BALANCE_THRESHOLD" }, text.paymentScheduleBalanceThreshold),
         formState.paymentScheduleChecked === "BALANCE_THRESHOLD" && (h("div", { class: classes.InputContainer, style: states.hideBalanceThreshold ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentThresholdSelectSlot)),
-        h("sl-radio", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.paymentScheduleChecked === "FIXED_DAY", onInput: () => callbacks.setPaymentScheduleChecked("FIXED_DAY"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "FIXED_DAY" }, text.paymentScheduleFixedDay),
+        h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentScheduleChecked === "FIXED_DAY", onInput: () => callbacks.setPaymentScheduleChecked("FIXED_DAY"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "FIXED_DAY" }, text.paymentScheduleFixedDay),
         formState.paymentScheduleChecked === "FIXED_DAY" && (h("div", { class: classes.InputContainer, style: states.hideFixedDay ? { display: "none" } : {} }, states.loading
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentFixedDaySelectSlot))))),
@@ -306,5 +256,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", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "secondary", 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 "../sqm-tax-and-cash/data";
+import { TAX_CONTEXT_NAMESPACE } from "../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
@@ -378,8 +378,17 @@ export class BankingInfoForm {
     }, {
       email: props.states.email,
     });
+    const vanillaStyle = `
+      sl-menu-item::part(base) {
+      color: var(--sqm-input-color);
+    }
+     sl-menu-item::part(base):hover {
+      background-color: var(--sqm-input-border-color-hover);
+    }
+    `;
     return (h(Host, null,
       h("style", { type: "text/css" }, styleString),
+      h("style", { type: "text/css" }, vanillaStyle),
       props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide, label: props.text.verifyEmailHeaderText },
         h("sqm-code-verification", { verifyCodeHeaderText: verifyDescription, reverifyCodeHeaderText: verifyDescription, onVerification: props.callbacks.onVerification }))) : null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {