@saasquatch/mint-components 1.15.0-80 → 1.15.0-82

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-16279e95.js');
+const global = require('./global-191f2253.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-16279e95.js');
+const global = require('./global-191f2253.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-16279e95.js');
+require('./global-191f2253.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 require('./cjs-1066ec21.js');
@@ -23,20 +23,20 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-6a1e63de.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-b61c8bdf.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-de90ef03.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-ec7a5c53.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-e2590f1b.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-87e083ca.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-0a8d3243.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-5310d41a.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-7ac7d3ac.js');
 require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
-const ShadowViewAddon = require('./ShadowViewAddon-9bf35bfe.js');
+const ShadowViewAddon = require('./ShadowViewAddon-2333d6ea.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-b3b7bb6e.js');
-const utils = require('./utils-d5821f8d.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-cf888c7b.js');
+const utils = require('./utils-e3305bd8.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -6518,7 +6518,7 @@ const HeroImage = /*#__PURE__*/Object.freeze({
   ColumnsCustomColors: ColumnsCustomColors
 });
 
-const scenario$7 = "@author:noah\n@owner:noah\n\nFeature: Hero Unit\n\n    Background: A portal with a hero unit exists\n        Given a hosted portal\n        And the portal has hero unit on the login page\n        And a user is viewing the login page\n\n    Scenario: The hero unit defaults to a single column layout\n        Given a hero unit does not have a \"columns\" prop\n        But the following html is wrapped by the hero unit\n            \"\"\"\n            <sqm-portal-login></sqm-portal-login>\n            <div slot=\"secondary-column\">\n            <h1 style=\"text-align:center\">Get Referring!</h1>\n            <p style=\"text-align:center\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n            </p>\n            </div>\n            \"\"\"\n        Then only a single column will be displayed\n        And within it will be the login component\n\n    Scenario: Hero layout can hide a column at 1023px or less\n        Given the user is viewing an hero unit with a \"primary\" and \"secondary\" column\n        And they want to hide the image in the \"primary\" column\n        And the \"column-to-hide-in-mobile\" is set to \"primary\"\n        When the user views the hero unit at 1023px or less\n        Then the image in the \"primary\" column is hidden\n\n    Scenario Outline: The hero unit supports single or dual column layouts\n        Given a hero unit with prop \"columns\" having <columnValue>\n        And it wraps <html>\n        Then the hero unit displays <columnValue> columns\n        Examples:\n            | columnValue | html                                                                                              |\n            | 1           | <h1>Column 1!</h1>                                                                                |\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n        Given a hero unit with \"columns\" \"2\"\n        And the following html\n            \"\"\"\n            <h1>Column 1!</h1>\n            <div>\n            <h1 style=\"text-align:center\">Column 2!</h1>\n            </div>\n            \"\"\"\n        When the hero unit is rendered\n        Then only one column is displayed with content\n        And column 1 will contain the \"Column 1!\" text\n        And column 1 will contain the \"Column 2!\" text\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\n        Then the two columns are displayed with content\n        And column 1 will contain the \"Column 1!\" text\n        And column 2 will contain the \"Column 2!\" text\n\n    Scenario Outline: A background for the hero unit can be set as an image or colour\n        Given a hero unit with <backgroundPropValue>\n        Then the background will be <background>\n        Examples:\n            | background                                                   | background               |\n            | https://images.unsplash.com/photo-1599676821464-3555954838dc | image of misty mountains |\n            | LightSlateGrey                                               | light slate grey         |\n            | #00FF00                                                      | green                    |\n            | rgb(128,0,128)                                               | purple                   |\n\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\n        Given a hero unit with the following HTML\n            \"\"\"\n            <h1>Column 1!</h1>\n            <div slot=\"secondary-column\">\n            <h1 style=\"text-align:center\">Column 2!</h1>\n            </div>\n            \"\"\"\n        And prop \"wrap-direction\" has <value>\n        When the window width is less than 600px\n        Then the two columns will stack\n        And <column> will be on top\n        Examples:\n            | value        | column |\n            | wrap         | 1      |\n            | wrap-reverse | 2      |\n            | <null>       | 1      |\n\n    Scenario Outline: Minimum height can be customized\n        Given the option \"Mininum Height (in px)\" is <value>\n        Then the hero image minimum height is <effectiveValue>\n        And the change is reflected in mobile view\n        Examples:\n            | value                 | effectiveValue |\n            | unset (default value) | 200px          |\n            | 200px                 | 500px          |";
+const scenario$7 = "@author:noah\n@owner:noah\n\nFeature: Hero Unit\n\n    Background: A portal with a hero unit exists\n        Given a hosted portal\n        And the portal has hero unit on the login page\n        And a user is viewing the login page\n\n    Scenario: The hero unit defaults to a single column layout\n        Given a hero unit does not have a \"columns\" prop\n        But the following html is wrapped by the hero unit\n            \"\"\"\n            <sqm-portal-login></sqm-portal-login>\n            <div slot=\"secondary-column\">\n            <h1 style=\"text-align:center\">Get Referring!</h1>\n            <p style=\"text-align:center\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n            </p>\n            </div>\n            \"\"\"\n        Then only a single column will be displayed\n        And within it will be the login component\n\n    Scenario Outline: Hero layout can hide a column at 1023px or less\n        Given the user is viewing a hero unit with a \"primary\" and \"secondary\" column\n        And the \"column-to-hide-in-mobile\" is set to <columnToHide>\n        When the user views the hero unit at 1023px or less\n        Then the <columnToHide> column <isHidden>\n\n        Examples:\n            | column_to_hide | isHidden     |\n            | primary        | is hidden    |\n            | secondary      | is hidden    |\n            | none           | is not hidden|\n\n    Scenario Outline: The hero unit supports single or dual column layouts\n        Given a hero unit with prop \"columns\" having <columnValue>\n        And it wraps <html>\n        Then the hero unit displays <columnValue> columns\n        Examples:\n            | columnValue | html                                                                                              |\n            | 1           | <h1>Column 1!</h1>                                                                                |\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n        Given a hero unit with \"columns\" \"2\"\n        And the following html\n            \"\"\"\n            <h1>Column 1!</h1>\n            <div>\n            <h1 style=\"text-align:center\">Column 2!</h1>\n            </div>\n            \"\"\"\n        When the hero unit is rendered\n        Then only one column is displayed with content\n        And column 1 will contain the \"Column 1!\" text\n        And column 1 will contain the \"Column 2!\" text\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\n        Then the two columns are displayed with content\n        And column 1 will contain the \"Column 1!\" text\n        And column 2 will contain the \"Column 2!\" text\n\n    Scenario Outline: A background for the hero unit can be set as an image or colour\n        Given a hero unit with <backgroundPropValue>\n        Then the background will be <background>\n        Examples:\n            | background                                                   | background               |\n            | https://images.unsplash.com/photo-1599676821464-3555954838dc | image of misty mountains |\n            | LightSlateGrey                                               | light slate grey         |\n            | #00FF00                                                      | green                    |\n            | rgb(128,0,128)                                               | purple                   |\n\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\n        Given a hero unit with the following HTML\n            \"\"\"\n            <h1>Column 1!</h1>\n            <div slot=\"secondary-column\">\n            <h1 style=\"text-align:center\">Column 2!</h1>\n            </div>\n            \"\"\"\n        And prop \"wrap-direction\" has <value>\n        When the window width is less than 600px\n        Then the two columns will stack\n        And <column> will be on top\n        Examples:\n            | value        | column |\n            | wrap         | 1      |\n            | wrap-reverse | 2      |\n            | <null>       | 1      |\n\n    Scenario Outline: Minimum height can be customized\n        Given the option \"Mininum Height (in px)\" is <value>\n        Then the hero image minimum height is <effectiveValue>\n        And the change is reflected in mobile view\n        Examples:\n            | value                 | effectiveValue |\n            | unset (default value) | 200px          |\n            | 200px                 | 500px          |";
 
 const Hero_stories = {
   title: "Components/Hero Layout",

package/dist/cjs/sqm-tax-and-cash.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-16279e95.js');
+require('./global-191f2253.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils$1 = require('./utils-7cbd60cc.js');
 require('./JSS-8503a151.js');
-const utils = require('./utils-d5821f8d.js');
+const utils = require('./utils-e3305bd8.js');
 const parseStates = require('./parseStates-d1effc19.js');
 const data = require('./data-d4339c2e.js');
 const extractProps = require('./extractProps-fd93ba62.js');
@@ -1171,12 +1171,12 @@ const TaxAndCashMonolith = class {
      */
     this.supportLink = "support team";
     /**
-     * @uiName Monolith States
-     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"] }
-     * @componentState { "title": "Step 2: Indirect tax ", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"] }
-     * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"] }
-     * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"] }
-     * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"] }
+     * @undocumented
+     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
+     * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" }
+     * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" }
+     * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" }
+     * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"], "uiGroup": "Dashboard Properties" }
      */
     this.stateController = "{}";
     domContextHooks_module.h$1(this);
@@ -1241,7 +1241,6 @@ function useDemoTaxAndCash(props) {
     namespace: data.TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
-  console.log("PROPS", props);
   const states = parseStates.parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-tax-and-cash"
     ? { ...prev, ...states[key] }

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -166,8 +166,9 @@ const WidgetVerification = class {
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
     /**
-     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"] }
-     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
+     * @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 = "{}";
     domContextHooks_module.h$1(this);

package/dist/cjs/{utils-d5821f8d.js → utils-e3305bd8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-16279e95.js');
+const global = require('./global-191f2253.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -914,7 +914,7 @@ export const queries = {
     query: payoutBalanceQuery,
   },
 };
-// TODO: Add rewardsExpired and rewardsCancelled
+// ! Any update to this should be reflected in StatPathBuilder.tsx in the saasquatch repo
 // this should be exposed in documentation somehow
 export const StatPaths = [
   { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -1,12 +1,12 @@
-import { Component, h, Host, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useRewardExchangeList, } from "./useRewardExchangeList";
-import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
-import { parseStates } from "../../utils/parseStates";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import { useRewardExchangeList, } from "./useRewardExchangeList";
 /**
  * @uiName Reward Exchange
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
@@ -150,7 +150,7 @@ export class SqmRewardExchangeList {
     this.costTitle = "Cost to Redeem";
     /**
      * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
-     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount",  }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount" }, "dependencies": ["sqm-reward-exchange-list"] }
      * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
      * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
      */
@@ -734,7 +734,7 @@ export class SqmRewardExchangeList {
             "text": "{ \"title\": \"Choose reward\", \"props\": { \"redeemStage\": \"chooseReward\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Reward details\", \"props\": { \"redeemStage\": \"chooseAmount\",  }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "text": "{ \"title\": \"Reward details\", \"props\": { \"redeemStage\": \"chooseAmount\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
             "name": "componentState"
           }, {
             "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"redeemStage\": \"confirmation\" }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",

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

@@ -108,8 +108,9 @@ export class WidgetVerification {
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
     /**
-     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"] }
-     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
+     * @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);
@@ -534,10 +535,13 @@ export class WidgetVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ \"title\": \"Step 1: Enter email\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-email-verification\"] }",
+            "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\"] }",
+            "text": "{ \"title\": \"Step 2: Enter code\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"], \"uiGroup\": \"Code Verification Step\" }",
             "name": "componentState"
           }],
         "text": ""

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

@@ -1010,12 +1010,12 @@ export class TaxAndCashMonolith {
      */
     this.supportLink = "support team";
     /**
-     * @uiName Monolith States
-     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"] }
-     * @componentState { "title": "Step 2: Indirect tax ", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"] }
-     * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"] }
-     * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"] }
-     * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"] }
+     * @undocumented
+     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
+     * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" }
+     * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" }
+     * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" }
+     * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"], "uiGroup": "Dashboard Properties" }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -5243,22 +5243,22 @@ export class TaxAndCashMonolith {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Monolith States",
-            "name": "uiName"
+            "text": undefined,
+            "name": "undocumented"
           }, {
-            "text": "{ \"title\": \"Step 1: Personal information\", \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"] }",
+            "text": "{ \"title\": \"Step 1: Personal information\", \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"], \"uiGroup\": \"Step 1 Properties\" }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 2: Indirect tax \", \"props\": { \"step\": \"/2\" }, \"dependencies\": [\"sqm-indirect-tax-form\"] }",
+            "text": "{ \"title\": \"Step 2: Indirect tax\", \"props\": { \"step\": \"/2\" }, \"dependencies\": [\"sqm-indirect-tax-form\"], \"uiGroup\": \"Step 2 Properties\" }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 3: Tax form\", \"props\": { \"step\": \"/3\" }, \"dependencies\": [\"sqm-docusign-form\"] }",
+            "text": "{ \"title\": \"Step 3: Tax form\", \"props\": { \"step\": \"/3\" }, \"dependencies\": [\"sqm-docusign-form\"], \"uiGroup\": \"Step 3 Properties\" }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Step 4: Payment method\", \"props\": { \"step\": \"/4\" }, \"dependencies\": [\"sqm-banking-info-form\"] }",
+            "text": "{ \"title\": \"Step 4: Payment method\", \"props\": { \"step\": \"/4\" }, \"dependencies\": [\"sqm-banking-info-form\"], \"uiGroup\": \"Step 4 Properties\" }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Dashboard\", \"props\": { \"step\": \"/dashboard\" }, \"dependencies\": [\"sqm-tax-and-cash-dashboard\"] }",
+            "text": "{ \"title\": \"Dashboard\", \"props\": { \"step\": \"/dashboard\" }, \"dependencies\": [\"sqm-tax-and-cash-dashboard\"], \"uiGroup\": \"Dashboard Properties\" }",
             "name": "componentState"
           }],
         "text": ""
@@ -5300,7 +5300,6 @@ function useDemoTaxAndCash(props) {
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
-  console.log("PROPS", props);
   const states = parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-tax-and-cash"
     ? { ...prev, ...states[key] }

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

@@ -314,6 +314,11 @@ export class TaxAndCashDashboard {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
+    /**
+     * @undocumented
+     * @componentState { "title": "Payouts on hold", "props": { "payoutStatus": "HOLD" }, "uiGroup": "Dashboard Properties" }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -1720,11 +1725,35 @@ export class TaxAndCashDashboard {
           }],
         "text": ""
       }
+    },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"Payouts on hold\", \"props\": { \"payoutStatus\": \"HOLD\" }, \"uiGroup\": \"Dashboard Properties\" }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
     }
   }; }
 }
 function useDemoTaxAndCashDashboard(props) {
-  // const states = parseStates(props.stateController);
+  // @ts-ignore
   return deepmerge({
     states: {
       dateSubmitted: "today",
@@ -1765,5 +1794,5 @@ function useDemoTaxAndCashDashboard(props) {
           },
         } })),
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/global/styles.js

@@ -71,7 +71,7 @@
   --teal-7: #004551;
 } */
 export const parseBrandingConfig = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66;
   return ({
     styles: `
 /* vietnamese */
@@ -959,6 +959,6 @@ sl-icon::part(base):hover {
 
 
 `,
-    font: config.main.brandFont,
+    font: (_66 = config === null || config === void 0 ? void 0 : config.main) === null || _66 === void 0 ? void 0 : _66.brandFont,
   });
 };

package/dist/collection/global/styles.ts

@@ -1050,5 +1050,5 @@ sl-icon::part(base):hover {
 
 
 `,
-  font: config.main.brandFont,
+  font: config?.main?.brandFont,
 });

package/dist/esm/{IndirectTaxDetailsView-451cf5e2.js → IndirectTaxDetailsView-084314d5.js}

@@ -1,7 +1,7 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-2f3b2adb.js';
+import { i as intl } from './global-80edfef3.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { f as formatErrorMessage } from './utils-c416c7e4.js';
+import { f as formatErrorMessage } from './utils-27b2ed4b.js';
 
 const style = {
   Description: {

package/dist/esm/{ShadowViewAddon-3c2957fe.js → ShadowViewAddon-eead271b.js}

@@ -1,5 +1,5 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-b3a06de8.js';
-import { i as intl } from './global-2f3b2adb.js';
+import { i as intl } from './global-80edfef3.js';
 import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-63370afd.js';
 import { H, L, J, d as dist, w as wn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -1214,7 +1214,7 @@ const queries = {
     query: payoutBalanceQuery,
   },
 };
-// TODO: Add rewardsExpired and rewardsCancelled
+// ! Any update to this should be reflected in StatPathBuilder.tsx in the saasquatch repo
 // this should be exposed in documentation somehow
 const StatPaths = [
   { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },

package/dist/esm/{global-2f3b2adb.js → global-80edfef3.js}

@@ -26006,7 +26006,7 @@ function insertFont(font) {
   --teal-7: #004551;
 } */
 const parseBrandingConfig = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66;
   return ({
     styles: `
 /* vietnamese */
@@ -26894,7 +26894,7 @@ sl-icon::part(base):hover {
 
 
 `,
-    font: config.main.brandFont,
+    font: (_66 = config === null || config === void 0 ? void 0 : config.main) === null || _66 === void 0 ? void 0 : _66.brandFont,
   });
 };