@saasquatch/mint-components 1.15.0-38 → 1.15.0-39

package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js

@@ -4,21 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-efeaed0c.js');
+const global = require('./global-a1506e15.js');
 const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
-const GenericTableView = require('./GenericTableView-925a0842.js');
+const GenericTableView = require('./GenericTableView-40fd9dd1.js');
 const reRender = require('./re-render-b324deab.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
 const useReferralTable = require('./useReferralTable-7c3f9600.js');
 const sqmTextSpanView = require('./sqm-text-span-view-ce4c0178.js');
 const ErrorView = require('./ErrorView-b2fcf954.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-64038caf.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-d4bc23a8.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
@@ -679,24 +679,26 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   RadioContainer: {
@@ -705,12 +707,15 @@ const style = {
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Checkbox: {
@@ -724,8 +729,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sl-color-gray-300)",
-    borderBottom: "1px solid var(--sl-color-gray-300)",
+    borderTop: "1px solid var(--sqm-border-color)",
+    borderBottom: "1px solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -762,23 +767,6 @@ const style = {
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",
   },
-  InfoAlert: {
-    "&::part(base)": {
-      backgroundColor: "transparent",
-      borderTop: "none",
-      border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-yellow-500)",
-    },
-  },
   InfoWarningIcon: {
     height: "26px",
     width: "26px",
@@ -803,12 +791,12 @@ const vanillaStyle = `
 
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      border: 1px solid var(--sl-color-danger-500);
-      border-radius: var(--sl-input-border-radius-medium);
+      border: 1px solid var(--sqm-danger-color-border);
+      border-radius: var(--sqm-input-border-radius);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;
@@ -2277,7 +2265,7 @@ const DocusignExpiredView = (props) => {
       index.h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text)",
         }, name: "clock" }),
       index.h("div", { class: classes.MessageContainer },
         index.h("p", { style: { margin: "0" } }, text.docusignExpired)),
@@ -2292,7 +2280,7 @@ const DocusignErrorView = (props) => {
       index.h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-gray-500)",
+          color: "var(--sqm-text)",
         }, name: "exclamation-octagon" }),
       index.h("div", { class: classes.MessageContainer },
         index.h("p", { style: { margin: "0" } }, text.docusignError)),
@@ -2376,7 +2364,7 @@ const style$3 = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -2387,31 +2375,27 @@ const style$3 = {
   },
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   InfoAlert: {
     "&::part(base)": {
-      backgroundColor: "transparent",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
-      padding: "0px",
-      marginBottom: "16px",
+      padding: "0 16px",
       border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-sky-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Container: {
@@ -2421,16 +2405,6 @@ const style$3 = {
     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",
@@ -2444,7 +2418,7 @@ const style$3 = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
 };
@@ -2462,6 +2436,8 @@ const vanillaStyle$2 = `
 
     a {
       cursor: pointer;
+      color: var(--sqm-text);
+      text-decoration: underline;
     }
 
 
@@ -2668,7 +2644,7 @@ function useDocusignFormDemo(props) {
   return cjs.cjs({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -2701,7 +2677,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (index.h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -2725,6 +2701,7 @@ const style$4 = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -2765,26 +2742,30 @@ const style$4 = {
     marginTop: "10px",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   InfoAlert: {
@@ -2809,10 +2790,36 @@ const style$4 = {
     width: "26px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginBottom: "var(--sl-spacing-small)",
   },
+  PrimaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-primary-button-background)",
+      color: "var(--sqm-primary-button-color)",
+      borderColor: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+    "&::part(base):hover": {
+      background: "var(--sqm-primary-button-background-hover)",
+    },
+  },
+  TertiaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-tertiary-button-background)",
+      color: "var(--sqm-tertiary-button-color)",
+      borderColor: "var(--sqm-tertiary-button-color-border)",
+      borderRadius: "var(--sqm-tertiary-button-radius)",
+      width: "max-content",
+      display: "flex",
+      margin: "auto",
+    },
+    "&::part(base):hover": {
+      color: "var(--sqm-text)",
+      background: "var(--sqm-tertiary-button-background-hover)",
+    },
+  },
 };
 const sheet$4 = JSS.createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
@@ -2820,6 +2827,19 @@ const vanillaStyle$3 = `
     :host{
       display: block;   
     }
+
+    hr {
+      border: 1px solid var(--sqm-border-color);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
     * {
        margin: 0;
        padding: 0;
@@ -2891,8 +2911,8 @@ const IndirectTaxFormView = (props) => {
               text.otherRegion,
               index.h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        index.h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
         global.intl.formatMessage({
           id: "cannotChangeInfoAlert",
           defaultMessage: text.cannotChangeInfoAlert,
@@ -2900,8 +2920,8 @@ const IndirectTaxFormView = (props) => {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       index.h("div", { class: classes.BtnContainer },
-        index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        index.h("sl-button", { type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        index.h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        index.h("sl-button", { class: classes.TertiaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: tertiarybutton-base" }, text.backButton))))));
 };
 
 const CONNECT_PARTNER = index_module.dist.gql `
@@ -7251,15 +7271,15 @@ const style$7 = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "1px solid var(--sqm-danger-color-icon)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -7290,9 +7310,6 @@ const style$7 = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -7303,26 +7320,31 @@ const style$7 = {
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -7356,6 +7378,11 @@ const vanillaStyle$4 = `
        padding: 0;
        box-sizing: border-box;
     }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
 
     p {
       line-height: 18px;
@@ -7407,18 +7434,46 @@ const vanillaStyle$4 = `
         margin: auto;
     }
 
-    sl-button[type="tertiary"]::part(base):hover{
-        color: #1ed760;
-    }
+*::part(primarybutton-base){
+  background-color: var(--sqm-primary-button-background);
+  color: var(--sqm-primary-button-color);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
+}
 
-    /* Corrected: This rule was duplicated and possibly redundant, ensure only one focus rule for primary buttons */
-    /* If you only have one primary button, this is the better way to apply global button styling */
-    /* sl-button[type="primary"]::part(base):focus{
-        box-shadow: none;
-    } */
+*::part(primarybutton-base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
+}
 
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
+}
+
+*::part(tertiarybutton-base){
+  background-color: var(--sqm-tertiary-button-background);
+  color: var(--sqm-tertiary-button-color);
+  border-color: var(--sqm-tertiary-button-color-border);
+  border-radius: var(--sqm-tertiary-button-radius);
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  background: var(--sqm-tertiary-button-background-hover);
+}
 
-    /* Corrected: Target sl-input, sl-select, sl-textarea labels */
     sl-input::part(label),
     sl-select::part(label),
     sl-textarea::part(label){
@@ -7429,43 +7484,43 @@ const vanillaStyle$4 = `
 
     /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
     sl-input::part(base),
-    sl-select::part(base),
+    sl-dropdown::part(base),
     sl-textarea::part(base){
       background-color: var(--sqm-input-background, #fff);
       border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
       color: var(--sqm-input-color, white);
       border-width: var(--sqm-border-width, 1px);
-      border-style: solid; /* Added for completeness */
-      border-color: var(--sqm-input-border-color, #ccc); /* Added default border color */
+      border-style: solid; 
+      border-color: var(--sqm-input-border-color, #ccc); 
     }
 
-    /* REMOVED: This rule is out of place here.
-       If sqm-name-fields is a separate component, its internal styles
-       should target sl-input::part(base) within its own stylesheet.
-    sqm-name-fields::part(input-base) {
-      background-color: var(--sqm-input-background, #fff);
-      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
-      color: var(--sqm-input-color, white);
-      border-width: var(--sqm-border-width, 1px);
+
+    sl-select::part(menu) {
+      background: var(--sqm-input-background, inherit);
+      color: var(--sqm-input-color, inherit);
+      border:none;
+    }
+
+    sl-select::part(panel) {
+      border-radius: var(--sqm-border-radius-normal);
+    }
+
+    sl-select::part(help-text) {
+      color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
     }
-    */
 
-    /* Corrected: sl-select::part(base), sl-textarea::part(base), removed border-color: none */
     sl-input::part(base):focus,
     sl-select::part(base):focus, /* Corrected part name for sl-select */
     sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
-      /* border-color: none; -- REMOVED: Invalid property value */
       border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
     }
 
-    /* Corrected: Target [disabled] host element then its part */
     sl-input[disabled]::part(label),
     sl-select[disabled]::part(label),
     sl-textarea[disabled]::part(label){
-      /* background: var(--sqm-input-disabled-background, #f5f5f5); -- Background on label usually doesn't show */
       color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
     }
-    /* Add rules for the disabled base parts if you want background/border */
+
     sl-input[disabled]::part(base),
     sl-select[disabled]::part(base),
     sl-textarea[disabled]::part(base){
@@ -7474,7 +7529,6 @@ const vanillaStyle$4 = `
     }
 
 
-    /* Corrected: Target sl-input::part(input) for autofill */
     sl-input::part(input):-webkit-autofill {
       box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
       -webkit-text-fill-color: var(--sqm-input-color, white) !important;
@@ -7561,7 +7615,7 @@ const UserInfoFormView = (props) => {
         }))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          index.h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: sqmInvoiceTableView.formatErrorMessage(text.firstName, formState.errors.firstName),
           }