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

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

@@ -34,7 +34,7 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -45,31 +45,27 @@ const style = {
   },
   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: {
@@ -79,16 +75,6 @@ const style = {
     flexDirection: "column",
     gap: "16px",
   },
-  Link: {
-    color: "var(--sl-color-sky-500)",
-    textDecoration: "none",
-    "&:visited": {
-      color: "var(--sl-color-sky-500)",
-    },
-    "&:hover": {
-      textDecoration: "underline",
-    },
-  },
   CheckboxWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -102,7 +88,7 @@ const style = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
 };
@@ -120,6 +106,8 @@ const vanillaStyle = `
 
     a {
       cursor: pointer;
+      color: var(--sqm-text);
+      text-decoration: underline;
     }
 
 

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

@@ -648,7 +648,7 @@ function useDocusignFormDemo(props) {
   return deepmerge({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -681,7 +681,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",

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

@@ -14,6 +14,7 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -54,26 +55,30 @@ const style = {
     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: {
@@ -98,10 +103,36 @@ const style = {
     width: "26px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginBottom: "var(--sl-spacing-small)",
   },
+  PrimaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-primary-button-background)",
+      color: "var(--sqm-primary-button-color)",
+      borderColor: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+    "&::part(base):hover": {
+      background: "var(--sqm-primary-button-background-hover)",
+    },
+  },
+  TertiaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-tertiary-button-background)",
+      color: "var(--sqm-tertiary-button-color)",
+      borderColor: "var(--sqm-tertiary-button-color-border)",
+      borderRadius: "var(--sqm-tertiary-button-radius)",
+      width: "max-content",
+      display: "flex",
+      margin: "auto",
+    },
+    "&::part(base):hover": {
+      color: "var(--sqm-text)",
+      background: "var(--sqm-tertiary-button-background-hover)",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -109,6 +140,19 @@ const vanillaStyle = `
     :host{
       display: block;   
     }
+
+    hr {
+      border: 1px solid var(--sqm-border-color);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
     * {
        margin: 0;
        padding: 0;
@@ -180,8 +224,8 @@ export const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
         intl.formatMessage({
           id: "cannotChangeInfoAlert",
           defaultMessage: text.cannotChangeInfoAlert,
@@ -189,6 +233,6 @@ export const IndirectTaxFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        h("sl-button", { class: classes.TertiaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: tertiarybutton-base" }, text.backButton))))));
 };

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

@@ -9,15 +9,15 @@ const style = {
   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: {
@@ -48,9 +48,6 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -61,26 +58,31 @@ const style = {
   },
   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: {
@@ -114,6 +116,11 @@ const vanillaStyle = `
        padding: 0;
        box-sizing: border-box;
     }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
 
     p {
       line-height: 18px;
@@ -165,18 +172,46 @@ const vanillaStyle = `
         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){
@@ -187,43 +222,43 @@ const vanillaStyle = `
 
     /* 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){
@@ -232,7 +267,6 @@ const vanillaStyle = `
     }
 
 
-    /* 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;
@@ -319,7 +353,7 @@ export const UserInfoFormView = (props) => {
         }))),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          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) ? {
+          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: formatErrorMessage(text.firstName, formState.errors.firstName),
           }

package/dist/collection/components/views/copy-text-view.js

@@ -68,7 +68,7 @@ export function CopyTextView(props) {
     },
     errorTextStyle: {
       margin: "0",
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
     notificationTextStyle: {
       margin: "0",
@@ -85,7 +85,8 @@ export function CopyTextView(props) {
     : props.buttonStyle === "button-outside"
       ? "top"
       : "top-end";
-  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: `base: ${props.buttonType || "primary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  console.log("buttontype is ", props.buttonType);
   return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,