@saasquatch/mint-components 1.15.0-4 → 1.15.0-41

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

@@ -1,6 +1,8 @@
 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";
@@ -107,6 +109,11 @@ export class WidgetVerification {
      * @uiGroup Code Verification Step
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /**
+     * @componentState { "title": "Email Step", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"] }
+     * @componentState { "title": "Code Step", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -115,10 +122,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 +135,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 +523,34 @@ 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": "{ \"title\": \"Email Step\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-email-verification\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Code Step\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"] }",
+            "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 +560,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,8 +1,8 @@
 import { h } from "@stencil/core";
-import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "./subregions";
+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";
-import { ErrorView } from "./sqm-tax-and-cash/ErrorView";
 export default {
   title: "Components/Tax Form",
 };
@@ -1217,9 +1217,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-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 = {
   FormWrapper: {
     display: "flex",
@@ -33,29 +33,26 @@ 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",
-    },
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   RadioContainer: {
@@ -64,12 +61,15 @@ const style = {
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Checkbox: {
@@ -83,8 +83,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: "1px solid var(--sqm-border-color)",
+    borderBottom: "1px solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -121,23 +121,6 @@ const style = {
     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)",
-    },
-  },
   InfoWarningIcon: {
     height: "26px",
     width: "26px",
@@ -160,20 +143,14 @@ 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);
+      border: 1px solid var(--sqm-danger-color-border);
+      border-radius: var(--sqm-input-border-radius);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;
@@ -271,5 +248,5 @@ export const BankingInfoFormView = (props) => {
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, 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: "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 "../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

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

@@ -40,7 +40,7 @@ export const DocusignExpiredView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text)",
         }, 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(--sl-color-gray-500)",
+          color: "var(--sqm-text)",
         }, name: "exclamation-octagon" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignError)),

package/dist/collection/components/tax-and-cash/sqm-docusign-form/sqm-docusign-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 = {
   FormWrapper: {
     display: "flex",
@@ -34,7 +34,7 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -43,42 +43,29 @@ const style = {
   BoldText: {
     fontWeight: "bold",
   },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-    "&::part(label)": {
-      padding: "0px",
-      margin: "0px",
-    },
-  },
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   InfoAlert: {
     "&::part(base)": {
-      backgroundColor: "transparent",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
-      padding: "0px",
-      marginBottom: "16px",
+      padding: "0 16px",
       border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-sky-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Container: {
@@ -88,16 +75,6 @@ const style = {
     flexDirection: "column",
     gap: "16px",
   },
-  Link: {
-    color: "var(--sl-color-sky-500)",
-    textDecoration: "none",
-    "&:visited": {
-      color: "var(--sl-color-sky-500)",
-    },
-    "&:hover": {
-      textDecoration: "underline",
-    },
-  },
   CheckboxWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -111,7 +88,7 @@ const style = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
 };
@@ -127,14 +104,10 @@ const vanillaStyle = `
        box-sizing: border-box;
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
-    }
-
     a {
       cursor: pointer;
+      color: var(--sqm-text);
+      text-decoration: underline;
     }
 
 

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

@@ -3,7 +3,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Element, Host, Prop, State, h } 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 { DocusignIframe, } from "./docusign-iframe/DocusignIframe";
 import { DocusignFormView } from "./sqm-docusign-form-view";
 import { useDocusignForm } from "./useDocusignForm";
@@ -648,7 +648,7 @@ function useDocusignFormDemo(props) {
   return deepmerge({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -681,7 +681,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",

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

@@ -1,9 +1,9 @@
 import { useMutation, useParent, useParentQueryValue, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { taxTypeToName, validTaxDocument } from "../utils";
+import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+import { taxTypeToName, validTaxDocument } from "../utils";
 const GET_TAX_DOCUMENT = gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../../styling/JSS";
 import { intl } from "../../../global/global";
-import { FORM_STEPS } from "../sqm-tax-and-cash/data";
+import { createStyleSheet } from "../../../styling/JSS";
+import { FORM_STEPS } from "../data";
 const style = {
   FormWrapper: {
     display: "flex",
@@ -14,6 +14,7 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -54,31 +55,30 @@ const style = {
     marginTop: "10px",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   InfoAlert: {
@@ -103,10 +103,36 @@ const style = {
     width: "26px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginBottom: "var(--sl-spacing-small)",
   },
+  PrimaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-primary-button-background)",
+      color: "var(--sqm-primary-button-color)",
+      borderColor: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+    "&::part(base):hover": {
+      background: "var(--sqm-primary-button-background-hover)",
+    },
+  },
+  TertiaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-tertiary-button-background)",
+      color: "var(--sqm-tertiary-button-color)",
+      borderColor: "var(--sqm-tertiary-button-color-border)",
+      borderRadius: "var(--sqm-tertiary-button-radius)",
+      width: "max-content",
+      display: "flex",
+      margin: "auto",
+    },
+    "&::part(base):hover": {
+      color: "var(--sqm-text)",
+      background: "var(--sqm-tertiary-button-background-hover)",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -114,17 +140,25 @@ const vanillaStyle = `
     :host{
       display: block;   
     }
+
+    hr {
+      border: 1px solid var(--sqm-border-color);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
-    }
   `;
 export const IndirectTaxFormView = (props) => {
   var _a;
@@ -190,8 +224,8 @@ export const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
         intl.formatMessage({
           id: "cannotChangeInfoAlert",
           defaultMessage: text.cannotChangeInfoAlert,
@@ -199,6 +233,6 @@ export const IndirectTaxFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        h("sl-button", { class: classes.TertiaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: tertiarybutton-base" }, text.backButton))))));
 };

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

@@ -4,7 +4,7 @@ import { useState } from "@saasquatch/universal-hooks";
 import { Component, Host, Prop, h } 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 { OtherRegionSlotView } from "../sqm-user-info-form/small-views/IndirectTaxDetailsView";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { IndirectTaxFormView } from "./sqm-indirect-tax-form-view";

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.js

@@ -2,10 +2,10 @@ import { useLocale, useMutation, useParent, useParentQueryValue, useParentValue,
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import JSONPointer from "jsonpointer";
-import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
+import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { getCountryObj, validTaxDocument } from "../utils";
-import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {