npm - @saasquatch/mint-components - Versions diffs - 1.15.0-99 → 1.16.0-1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1015) hide show

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

@@ -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",
@@ -39,7 +39,7 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sqm-danger-color-icon)",
+    color: "var(--sl-color-danger-500)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -48,6 +48,44 @@ 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",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlert: {
+    "&::part(base)": {
+      backgroundColor: "transparent",
+      borderTop: "none",
+      padding: "0px",
+      marginBottom: "16px",
+      border: "none",
+    },
+    "&::part(message)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      padding: "10px",
+      height: "max-content",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-sky-500)",
+    },
+  },
   Container: {
     width: "100%",
     display: "flex",
@@ -55,6 +93,16 @@ 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",
@@ -68,7 +116,7 @@ const style = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
   Dialog: {
@@ -97,21 +145,24 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const vanillaStyle = `
-  :host{
-    display: block;
-  }
+    :host{
+      display: block;
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
-  * {
-      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);
+    }
-  a {
-    color: inherit;
-    text-decoration: underline;
-    cursor: pointer;
-  }
+    a {
+      cursor: pointer;
+    }
   `;
@@ -125,7 +176,7 @@ export const DocusignFormView = (props) => {
       vanillaStyle),
     h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
       h("div", { class: classes.ModalTitleContainer, slot: "label" },
-        h("sl-icon", { name: "info-circle", style: { color: "var(--sqm-informative-color-icon)" } }),
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
         h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       h("p", null, intl.formatMessage({
         id: "modalText",
@@ -143,16 +194,20 @@ export const DocusignFormView = (props) => {
         h("h3", null, text.taxForm),
         h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
     states.loadingError && (h("div", null,
-      h("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
+        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)),
         })))),
-    ((_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.ErrorAlertContainer },
+      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,

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

@@ -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 "../data";
+import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
 import { DocusignIframe, } from "./docusign-iframe/DocusignIframe";
 import { DocusignFormView } from "./sqm-docusign-form-view";
 import { useDocusignForm } from "./useDocusignForm";
@@ -723,7 +723,7 @@ function useDocusignFormDemo(props) {
   return deepmerge({
     text: props.getTextProps(),
     states: {
-      step: "3",
+      step: "4",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -759,7 +759,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "inherit",
+      background: "#fafafa",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",

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

@@ -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 "../data";
-import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { taxTypeToName, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 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 CHANGED Viewed

@@ -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 { intl } from "../../../global/global";
+import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 const style = {
   FormWrapper: {
     display: "flex",
@@ -14,7 +14,6 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -55,43 +54,59 @@ const style = {
     marginTop: "10px",
   },
   DescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
   },
-  InfoWarningIcon: {
-    height: "26px",
-    width: "26px",
+  SecondaryBtn: {
+    "&::part(base)": {
+      color: "var(--sl-color-gray-800) !important",
+    },
   },
-  PageDescriptionText: {
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-medium)",
-    marginBottom: "var(--sl-spacing-small)",
+  AlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
   },
-  PrimaryButton: {
+  PartnerAlertContainer: {
     "&::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)",
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+      padding: "0 16px",
     },
-    "&::part(base):hover": {
-      background: "var(--sqm-primary-button-background-hover)",
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
     },
   },
-  SecondaryButton: {
+  InfoAlert: {
+    marginTop: "var(--sl-spacing-large)",
     "&::part(base)": {
-      background: "var(--sqm-secondary-button-background)",
-      color: "var(--sqm-secondary-button-color)",
-      borderColor: "var(--sqm-secondary-button-color-border)",
-      borderRadius: "var(--sqm-secondary-button-radius)",
-      width: "max-content",
-      display: "flex",
-      margin: "auto",
+      backgroundColor: "transparent",
+      borderTop: "none",
+      padding: "0px",
+      border: "none",
+    },
+    "&::part(message)": {
+      alignItems: "center",
+      padding: "var(--sl-spacing-small)",
+      whiteSpace: "nowrap",
     },
-    "&::part(base):hover": {
-      color: "var(--sqm-text)",
-      background: "var(--sqm-secondary-button-background-hover)",
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-yellow-500)",
     },
   },
+  InfoWarningIcon: {
+    height: "26px",
+    width: "26px",
+  },
+  PageDescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-medium)",
+    marginBottom: "var(--sl-spacing-small)",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -99,23 +114,17 @@ const vanillaStyle = `
     :host{
       display: block;
     }
-    hr {
-      border: var(--sqm-border-thickness, 1px) solid var(--sqm-border-color);
-    }
-    a {
-      color: inherit;
-      text-decoration: underline;
-      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;
@@ -137,24 +146,30 @@ export const IndirectTaxFormView = (props) => {
         h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
       states.loadingError && (h("div", null,
-        h("sqm-form-message", { type: "error" },
-          h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        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)),
           })))),
-      ((_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 && (h("sqm-form-message", { type: "info" },
-        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+      states.isPartner && (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,
@@ -175,13 +190,15 @@ export const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sqm-form-message", { type: "info" }, intl.formatMessage({
-        id: "cannotChangeInfoAlert",
-        defaultMessage: text.cannotChangeInfoAlert,
-      }, {
-        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-      })),
+      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" }),
+        intl.formatMessage({
+          id: "cannotChangeInfoAlert",
+          defaultMessage: text.cannotChangeInfoAlert,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        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))))));
 };

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

@@ -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 "../data";
+import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/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";
@@ -913,7 +913,7 @@ export class IndirectTaxForm {
 }
 function useDemoIndirectTaxForm(props) {
   const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
-  const [option, setOption] = useState("otherRegion");
+  const [option, setOption] = useState(null);
   const [demoFormState, setDemoFormState] = useState({});
   return deepmerge({
     states: {

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

@@ -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 "../data";
-import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+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 { 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) {

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js CHANGED Viewed

@@ -7,12 +7,12 @@ const style = {
     display: "grid",
     gridTemplateColumns: "1fr",
     gridGap: "var(--sl-spacing-large)",
-    background: "inherit",
+    background: "var(--sl-color-neutral-0)",
     boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
-    borderRadius: "var(--sqm-border-radius-normal)",
+    borderRadius: "4px",
     padding: "var(--sl-spacing-large)",
     minHeight: "150px",
-    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    border: "1px solid var(--sl-color-gray-200)",
     maxWidth: "450px",
   },
   StatusContainer: {
@@ -22,7 +22,7 @@ const style = {
   },
   MainCurrencyLabel: {
     fontWeight: "var(--sl-font-weight-normal)",
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
   },
   MainCurrency: {
     margin: 0,
@@ -31,12 +31,12 @@ const style = {
   },
   SubduedRegularText: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
     margin: 0,
     width: "auto",
   },
   PaypalEmail: {
-    borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderRight: "1px solid var(--sl-color-gray-200)",
     paddingRight: "var(--sl-spacing-small)",
     "@media (max-width: 499px)": {
       borderRight: "none",
@@ -44,7 +44,7 @@ const style = {
     },
   },
   PaypalDetailsContainer: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -65,7 +65,7 @@ const style = {
     },
   },
   AccountDetailsContainer: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -78,7 +78,7 @@ const style = {
     gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
     paddingTop: "var(--sq-spacing-xx-small)",
     "& > :not(:last-child)": {
-      borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+      borderRight: "1px solid var(--sl-color-gray-200)",
     },
     "& > :nth-child(3)": {
       border: "none",
@@ -95,7 +95,7 @@ const style = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderTop: "1px solid var(--sl-color-gray-200)",
   },
   SkeletonOne: {
     width: "25%",
@@ -109,21 +109,25 @@ const style = {
     width: "50%",
     height: "34px",
   },
-  SuccessBadge: {
+  Alert: {
     "&::part(base)": {
-      textAlign: "center",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-icon)",
-      color: "var(--sl-color-white)",
+      backgroundColor: "var(--sl-color-warning-100)",
+      border: "1px solid var(--sl-color-warning-200)",
+      padding: "0 16px",
     },
-  },
-  PrimaryBadge: {
-    "&::part(base)": {
-      textAlign: "center",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-icon)",
-      color: "var(--sl-color-white)",
+    "& sl-icon": {
+      margin: 0,
     },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+      margin: 0,
+    },
+  },
+  AlertContent: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    flexDirection: "column",
   },
   Container: {
     display: "flex",
@@ -146,14 +150,13 @@ export function PayoutDetailsCardView(props) {
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";
-    const badgeClass = badgeType === "success" ? classes.SuccessBadge : classes.PrimaryBadge;
     const statusText = intl.formatMessage({
       id: "badgeText",
       defaultMessage: statusBadgeText,
     }, {
       badgeText: status,
     });
-    return (h("sl-badge", { pill: true, class: badgeClass }, statusText));
+    return (h("sl-badge", { pill: true, type: badgeType }, statusText));
   };
   const thresholdText = intl.formatMessage({
     id: "thresholdText",

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Host, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { getProps } from "../../../utils/utils";
 import { PayoutDetailsCardView } from "./sqm-payout-details-card-view";
 import { usePayoutDetailsCard } from "./usePayoutDetailsCard";
+import { getProps } from "../../../utils/utils";
 /**
  * @uiName Payout Details Card
  * @exampleGroup Tax and Cash Components
@@ -31,10 +31,6 @@ export class PayoutDetailsCard {
      * @uiName Payout missing information subtext
      */
     this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
-    /**
-     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
-     */
-    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -138,27 +134,6 @@ export class PayoutDetailsCard {
       "reflect": false,
       "defaultValue": "\"Missing banking information, go to Impact.com to resolve.\""
     },
-    "stateController": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
-            "name": "componentState"
-          }],
-        "text": ""
-      },
-      "attribute": "state-controller",
-      "reflect": false,
-      "defaultValue": "\"{}\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { useParentQueryValue } from "@saasquatch/component-boilerplate";
 import { DateTime } from "luxon";
 import { intl } from "../../../global/global";
-import { USER_QUERY_NAMESPACE } from "../data";
+import { USER_QUERY_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { useParentQueryValue } from "@saasquatch/component-boilerplate";
 export function usePayoutDetailsCard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { data, loading } = useParentQueryValue(USER_QUERY_NAMESPACE);

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.js CHANGED Viewed

@@ -13,6 +13,7 @@ export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: {
 export const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:INTERNAL" } } }));
 export const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:REVIEW" } } }));
 export const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:FAILED" } } }));
+export const W9ThresholdReached = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "OVER_W9_THRESHOLD" } } }));
 export const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
 export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));
 export const Error = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, error: true } } }));