npm - @saasquatch/mint-components - Versions diffs - 1.15.0-41 → 1.15.0-42 - Mend

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

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 (596) hide show

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js CHANGED Viewed

@@ -1,107 +1,106 @@
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { h, Component, Host, State } from "@stencil/core";
 import { useStencilbook } from "@saasquatch/stencilbook";
-import { Component, h, Host, State } from "@stencil/core";
-import * as NewPortal from "../../stories/NewPortal.stories";
-import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as Widget from "../../stories/Widget.stories";
-import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
-import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as EmptyState from "../sqm-empty/EmptyState.stories";
+import * as Pagination from "../sqm-pagination/Pagination.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
-import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
-import * as BrandStories from "../sqm-brand/SqmBrand.stories";
-import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
-import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
-import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
-import * as CloseButton from "../sqm-close-button/CloseButton.stories";
-import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
-import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
-import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
-import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as Router from "../sqm-router/Router.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
 import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
+import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
 import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
-import * as EmptyState from "../sqm-empty/EmptyState.stories";
-import * as FormMessage from "../sqm-form-message/FormMessage.stories";
-import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
-import * as Hero from "../sqm-hero/Hero.stories";
-import * as Image from "../sqm-image/Image.stories";
-import * as InputField from "../sqm-input-field/InputField.stories";
-import * as UseInputField from "../sqm-input-field/UseInputField.stories";
-import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
-import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
-import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
-import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
-import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
 import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
-import * as LinkButton from "../sqm-link-button/LinkButton.stories";
-import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
-import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
-import * as NameFields from "../sqm-name-fields/NameFields.stories";
+import * as FormMessage from "../sqm-form-message/FormMessage.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
+import * as NewPortal from "../../stories/NewPortal.stories";
+import * as Widget from "../../stories/Widget.stories";
 import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
-import * as Pagination from "../sqm-pagination/Pagination.stories";
-import * as PasswordField from "../sqm-password-field/PasswordField.stories";
-import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
-import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
-import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
-import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
-import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
-import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
-import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
-import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
-import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
-import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
 import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
-import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
 import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
 import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
-import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
-import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
-import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
-import * as QRCode from "../sqm-qr-code/QRCode.stories";
-import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
-import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
-import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
-import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
-import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
 import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
 import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
-import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
+import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
+import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
+import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
+import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
+import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as InputField from "../sqm-input-field/InputField.stories";
+import * as UseInputField from "../sqm-input-field/UseInputField.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
-import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
-import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
 import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
-import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
-import * as Router from "../sqm-router/Router.stories";
-import * as Scroll from "../sqm-scroll/Scroll.stories";
-import * as ShareButton from "../sqm-share-button/ShareButton.stories";
-import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
-import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as ShareLink from "../sqm-share-link/ShareLink.stories";
-import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
-import * as Tabs from "../sqm-tabs/Tabs.stories";
-import * as TaskCard from "../sqm-task-card/TaskCard.stories";
-import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
-import * as ProgressBar from "../sqm-task-card/progress-bar/ProgressBar.stories";
-import * as Text from "../sqm-text/Text.stories";
+import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
+import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
 import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as Image from "../sqm-image/Image.stories";
 import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
-import * as UserName from "../sqm-user-name/UserName.stories";
-import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
-import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
-import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
+import * as Scroll from "../sqm-scroll/Scroll.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareCode from "../sqm-share-code/ShareCode.stories";
+import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
+import * as EmailRegistration from "../views/EmailRegistration.stories";
+import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
+import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
+import * as LinkButton from "../sqm-link-button/LinkButton.stories";
+import * as CloseButton from "../sqm-close-button/CloseButton.stories";
 import * as TaxForm from "../tax-and-cash/TaxForm.stories";
+import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
+import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ProgressBar from "../sqm-task-card/progress-bar/ProgressBar.stories";
 import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
+import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
+import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
+import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
+import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
+import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
+import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
 import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
-import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
-import * as EmailRegistration from "../views/EmailRegistration.stories";
-import { ShadowViewAddon } from "../../ShadowViewAddon";
+import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
+import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
+import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
+import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
+import * as QRCode from "../sqm-qr-code/QRCode.stories";
+import * as Text from "../sqm-text/Text.stories";
+import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
-import * as Themes from "./Themes";
+import { ShadowViewAddon } from "../../ShadowViewAddon";
 const stories = [
   InvoiceTable,
   InvoiceTableCells,
@@ -134,7 +133,6 @@ const stories = [
   PortalEmailVerification,
   PortalResetPassword,
   PortalVerifyEmail,
-  AssetCard,
   DividedLayout,
   ChangePassword,
   PortalProfile,

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js CHANGED Viewed

@@ -17,7 +17,7 @@ export function TaskCardView(props) {
       "& .main": {
         position: "relative",
         boxSizing: "border-sizing",
-        background: content.backgroundColor || "var(--sl-color-neutral-0)",
+        background: content.backgroundColor || "var(--sqm-portal-background)",
         border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
         borderRadius: "var(--sl-border-radius-large)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js CHANGED Viewed

@@ -2,11 +2,10 @@ import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { useState, 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 { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 export class WidgetCodeVerification {
   constructor() {
     /**
@@ -46,11 +45,6 @@ export class WidgetCodeVerification {
      * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    /**
-     * @componentState { "title": "Verification Failed", "props": { "states": { "verifyFailed": true } } }
-     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
-     */
-    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -234,30 +228,6 @@ export class WidgetCodeVerification {
       "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\": \"Verification Failed\", \"props\": { \"states\": { \"verifyFailed\": true } } }",
-            "name": "componentState"
-          }, {
-            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
-            "name": "componentState"
-          }],
-        "text": ""
-      },
-      "attribute": "state-controller",
-      "reflect": false,
-      "defaultValue": "\"{}\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -313,10 +283,10 @@ function useDemoWidgetCodeVerification(props) {
   const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
-      initialiseLoading: false,
       loading: false,
       email: "test@example.com",
       emailResent,
+      resendError: false,
       verifyFailed: false,
     },
     refs: {
@@ -327,5 +297,5 @@ function useDemoWidgetCodeVerification(props) {
       submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
-  }, props.demoData || parseStates(props.stateController) || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -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");
@@ -40,26 +40,18 @@ function useTemplateChildren({ parent, callback }) {
  */
 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) {
@@ -107,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:");
@@ -116,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" }),
@@ -125,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 CHANGED Viewed

@@ -1,8 +1,6 @@
 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";
@@ -109,11 +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.";
-    /**
-     * @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() { }
@@ -122,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,
@@ -135,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"; }
@@ -523,34 +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": "{ \"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(props) {
+function useDemoWidgetVerificationInternal() {
   const [showCode, setShowCode] = useParentState({
     namespace: SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -560,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 CHANGED Viewed

@@ -1,8 +1,8 @@
 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 LoadingView from "./sqm-tax-and-cash/LoadingView";
 import { taxTypeToName } from "./utils";
+import { ErrorView } from "./sqm-tax-and-cash/ErrorView";
 export default {
   title: "Components/Tax Form",
 };
@@ -1217,13 +1217,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 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 = {
   FormWrapper: {
     display: "flex",
@@ -145,8 +145,10 @@ const vanillaStyle = `
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      border: 1px solid var(--sqm-danger-color-border);
-      border-radius: var(--sqm-input-border-radius);
+      --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) {
@@ -248,5 +250,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", 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/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 = {
   FormWrapper: {
     display: "flex",

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";

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",

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";

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) {