@saasquatch/mint-components 2.1.2-4 → 2.1.3

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -168,8 +168,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -183,8 +183,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -198,8 +198,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -213,7 +213,7 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -227,7 +227,7 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "error",
           icon: "exclamation-triangle",
         };
@@ -252,9 +252,9 @@ export function PayoutStatusAlertView(props) {
       case "OVER_W9_THRESHOLD":
         if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
           return;
-        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
+        h("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (h("div", { style: { paddingTop: "10px" } },
           h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h("div", { style: { paddingTop: "10px" } },
@@ -271,6 +271,9 @@ export function PayoutStatusAlertView(props) {
         return;
     }
   }
+  if (states.loading) {
+    return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
+  }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return h("div", null);
@@ -278,7 +281,7 @@ export function PayoutStatusAlertView(props) {
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sqm-form-message", { loading: states.loading, type: alertDetails.alertType },
+    h("sqm-form-message", { type: alertDetails.alertType },
       h("p", { part: "alert-title" }, alertDetails.header),
       h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));

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

@@ -4,35 +4,47 @@ const style = {
   Container: {
     display: "flex",
     flexDirection: "column",
-    gap: "35px",
+    gap: "24px",
   },
   HeaderContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "10px",
   },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const LoadingView = () => {
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("sqm-skeleton", { width: "45%", height: "40px !important" }),
+    h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
     h("div", { class: sheet.classes.HeaderContainer },
-      h("sqm-skeleton", { width: "15%" }),
-      h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "15%" }),
-    h("sqm-skeleton", { width: "80px", height: "30px !important" })));
+      h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
 };
 export default LoadingView;

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

@@ -113,6 +113,16 @@ const style = {
   EditBankDetailsButton: {
     marginTop: "var(--sl-spacing-large)",
   },
+  SkeletonOne: {
+    width: "15%",
+    height: "10px",
+  },
+  SkeletonTwo: {
+    width: "25%",
+    height: "24px",
+    top: "var(--sl-spacing-small)",
+    marginBottom: "var(--sl-spacing-x-small)",
+  },
   TaxSectionSkeletonContainer: {
     display: "flex",
     flexDirection: "column",
@@ -616,7 +626,7 @@ export const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (h("sqm-form-message", { loading: states.loading, exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
+      alertInfo && (h("sqm-form-message", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
         h("strong", null, alertInfo.header),
         h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -634,8 +644,8 @@ export const TaxAndCashDashboardView = (props) => {
           states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       (!states.noFormNeeded || states.status === "NOT_VERIFIED") && (h("div", { class: sheet.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
-          h("sqm-skeleton", { width: "15%", height: "10px" }),
-          h("sqm-skeleton", { width: "25%", height: "24px" }))) : (h("div", null,
+          h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+          h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,
           h("div", null,
             h("span", { class: sheet.classes.TaxFormDetailsContainer },
               h("div", { class: sheet.classes.StatusContainer },
@@ -646,11 +656,11 @@ export const TaxAndCashDashboardView = (props) => {
                   documentType: states.documentTypeString || "W-9",
                 })),
                 h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
-            states.noFormNeeded &&
+            !states.noFormNeeded &&
               states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
       h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
-        h("sqm-skeleton", { width: "15%", height: "10px" }),
-        h("sqm-skeleton", { width: "25%", height: "24px" }))) : (h("div", null,
+        h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+        h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
           h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet.classes.DropdownTooltipContainer },

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

@@ -325,7 +325,7 @@ export const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-      (states.isPartner || states.isUser) && (h("sqm-form-message", { loading: states.loading, type: "info" },
+      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
         h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         h("p", { part: "alert-description" }, intl.formatMessage({
           id: "isPartnerAlertDescription",

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, _66, _67, _68, _69, _70, _71;
+  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, _67;
   return ({
     styles: `
 /* vietnamese */
@@ -577,72 +577,71 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: ${((_d = (_c = config === null || config === void 0 ? void 0 : config.color) === null || _c === void 0 ? void 0 : _c.loadingSkeleton) === null || _d === void 0 ? void 0 : _d.background) || "hsl(240 5.9% 90%)"};
-  --sqm-skeleton-animation-background: ${((_f = (_e = config === null || config === void 0 ? void 0 : config.color) === null || _e === void 0 ? void 0 : _e.loadingSkeleton) === null || _f === void 0 ? void 0 : _f.animationBackground) || "hsl(240 4.8% 95.9%)"};
-  --sqm-text: ${((_h = (_g = config === null || config === void 0 ? void 0 : config.color) === null || _g === void 0 ? void 0 : _g.textColorShades) === null || _h === void 0 ? void 0 : _h.mainText) || "hsl(240, 4%, 16%)"};
-  --sqm-text-subdued: ${((_k = (_j = config === null || config === void 0 ? void 0 : config.color) === null || _j === void 0 ? void 0 : _j.textColorShades) === null || _k === void 0 ? void 0 : _k.subduedText) || "hsl(240, 3%, 46%)"};
-
-  --sqm-primary-color: ${((_l = config === null || config === void 0 ? void 0 : config.main) === null || _l === void 0 ? void 0 : _l.brandColor) || "hsl(0, 0%, 7%)"};
-  --sqm-primary-button-background:${((_o = (_m = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonColor) === null || _o === void 0 ? void 0 : _o.background) || "hsl(0, 0%, 7%)"};
-  --sqm-primary-button-background-hover: ${((_q = (_p = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.background) || "hsl(0, 0%, 25%)"};
-  --sqm-primary-button-color-hover: ${((_s = (_r = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _r === void 0 ? void 0 : _r.buttonHoverColor) === null || _s === void 0 ? void 0 : _s.label) || "hsla(0, 0%, 100%, 1)"};
-  --sqm-primary-button-border-color-hover: ${((_u = (_t = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonHoverColor) === null || _u === void 0 ? void 0 : _u.border) || "hsl(0, 0%, 25%)"};
-  --sqm-primary-button-color: ${((_w = (_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.buttonColor) === null || _w === void 0 ? void 0 : _w.label) || "hsla(0, 0%, 100%, 1)"};
-  --sqm-primary-button-color-border: ${((_y = (_x = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _x === void 0 ? void 0 : _x.buttonColor) === null || _y === void 0 ? void 0 : _y.border) || "hsl(0, 0%, 7%)"};
-  --sqm-primary-button-radius: ${((_z = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _z === void 0 ? void 0 : _z.borderRadius) ? ((_0 = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _0 === void 0 ? void 0 : _0.borderRadius) + "px"
+  --sqm-skeleton-background: hsl(240, 4%, 91%);
+  --sqm-text: ${((_d = (_c = config === null || config === void 0 ? void 0 : config.color) === null || _c === void 0 ? void 0 : _c.textColorShades) === null || _d === void 0 ? void 0 : _d.mainText) || "hsl(240, 4%, 16%)"};
+  --sqm-text-subdued: ${((_f = (_e = config === null || config === void 0 ? void 0 : config.color) === null || _e === void 0 ? void 0 : _e.textColorShades) === null || _f === void 0 ? void 0 : _f.subduedText) || "hsl(240, 3%, 46%)"};
+
+  --sqm-primary-color: ${((_g = config === null || config === void 0 ? void 0 : config.main) === null || _g === void 0 ? void 0 : _g.brandColor) || "hsl(0, 0%, 7%)"};
+  --sqm-primary-button-background:${((_j = (_h = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _h === void 0 ? void 0 : _h.buttonColor) === null || _j === void 0 ? void 0 : _j.background) || "hsl(0, 0%, 7%)"};
+  --sqm-primary-button-background-hover: ${((_l = (_k = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _k === void 0 ? void 0 : _k.buttonHoverColor) === null || _l === void 0 ? void 0 : _l.background) || "hsl(0, 0%, 25%)"};
+  --sqm-primary-button-color-hover: ${((_o = (_m = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonHoverColor) === null || _o === void 0 ? void 0 : _o.label) || "hsla(0, 0%, 100%, 1)"};
+  --sqm-primary-button-border-color-hover: ${((_q = (_p = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.border) || "hsl(0, 0%, 25%)"};
+  --sqm-primary-button-color: ${((_s = (_r = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _r === void 0 ? void 0 : _r.buttonColor) === null || _s === void 0 ? void 0 : _s.label) || "hsla(0, 0%, 100%, 1)"};
+  --sqm-primary-button-color-border: ${((_u = (_t = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonColor) === null || _u === void 0 ? void 0 : _u.border) || "hsl(0, 0%, 7%)"};
+  --sqm-primary-button-radius: ${((_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.borderRadius) ? ((_w = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _w === void 0 ? void 0 : _w.borderRadius) + "px"
       : "4px"};
-  --sqm-secondary-button-background: ${((_2 = (_1 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _1 === void 0 ? void 0 : _1.buttonColor) === null || _2 === void 0 ? void 0 : _2.background) || "hsl(0, 0%, 100%)"};
-  --sqm-secondary-button-background-hover: ${((_4 = (_3 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _3 === void 0 ? void 0 : _3.buttonHoverColor) === null || _4 === void 0 ? void 0 : _4.background) || "hsl(0, 0%, 7%)"};
-  --sqm-secondary-button-color-hover: ${((_6 = (_5 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _5 === void 0 ? void 0 : _5.buttonHoverColor) === null || _6 === void 0 ? void 0 : _6.label) || "hsl(0, 0%, 100%)"};
-  --sqm-secondary-button-border-color-hover: ${((_8 = (_7 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _7 === void 0 ? void 0 : _7.buttonHoverColor) === null || _8 === void 0 ? void 0 : _8.border) || "hsl(0, 0%, 7%)"};
-  --sqm-secondary-button-color: ${((_10 = (_9 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _9 === void 0 ? void 0 : _9.buttonColor) === null || _10 === void 0 ? void 0 : _10.label) || "hsl(0, 0%, 7%)"};
-  --sqm-secondary-button-color-border: ${((_12 = (_11 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _11 === void 0 ? void 0 : _11.buttonColor) === null || _12 === void 0 ? void 0 : _12.border) || "hsl(0, 0%, 100%)"};
-  --sqm-secondary-button-radius: ${((_13 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _13 === void 0 ? void 0 : _13.borderRadius) ? ((_14 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _14 === void 0 ? void 0 : _14.borderRadius) + "px"
+  --sqm-secondary-button-background: ${((_y = (_x = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonColor) === null || _y === void 0 ? void 0 : _y.background) || "hsl(0, 0%, 100%)"};
+  --sqm-secondary-button-background-hover: ${((_0 = (_z = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _z === void 0 ? void 0 : _z.buttonHoverColor) === null || _0 === void 0 ? void 0 : _0.background) || "hsl(0, 0%, 7%)"};
+  --sqm-secondary-button-color-hover: ${((_2 = (_1 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _1 === void 0 ? void 0 : _1.buttonHoverColor) === null || _2 === void 0 ? void 0 : _2.label) || "hsl(0, 0%, 100%)"};
+  --sqm-secondary-button-border-color-hover: ${((_4 = (_3 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _3 === void 0 ? void 0 : _3.buttonHoverColor) === null || _4 === void 0 ? void 0 : _4.border) || "hsl(0, 0%, 7%)"};
+  --sqm-secondary-button-color: ${((_6 = (_5 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _5 === void 0 ? void 0 : _5.buttonColor) === null || _6 === void 0 ? void 0 : _6.label) || "hsl(0, 0%, 7%)"};
+  --sqm-secondary-button-color-border: ${((_8 = (_7 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _7 === void 0 ? void 0 : _7.buttonColor) === null || _8 === void 0 ? void 0 : _8.border) || "hsl(0, 0%, 100%)"};
+  --sqm-secondary-button-radius: ${((_9 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _9 === void 0 ? void 0 : _9.borderRadius) ? ((_10 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _10 === void 0 ? void 0 : _10.borderRadius) + "px"
       : "4px"};
 
-  --sqm-border-radius-normal: ${((_15 = config === null || config === void 0 ? void 0 : config.border) === null || _15 === void 0 ? void 0 : _15.borderRadius) ? ((_16 = config === null || config === void 0 ? void 0 : config.border) === null || _16 === void 0 ? void 0 : _16.borderRadius) + "px" : "4px"}; 
-  --sqm-border-color: ${((_17 = config === null || config === void 0 ? void 0 : config.border) === null || _17 === void 0 ? void 0 : _17.borderColor) || "hsl(240, 4%, 91%)"};
+  --sqm-border-radius-normal: ${((_11 = config === null || config === void 0 ? void 0 : config.border) === null || _11 === void 0 ? void 0 : _11.borderRadius) ? ((_12 = config === null || config === void 0 ? void 0 : config.border) === null || _12 === void 0 ? void 0 : _12.borderRadius) + "px" : "4px"}; 
+  --sqm-border-color: ${((_13 = config === null || config === void 0 ? void 0 : config.border) === null || _13 === void 0 ? void 0 : _13.borderColor) || "hsl(240, 4%, 91%)"};
 
-  --sqm-border-thickness: ${((_18 = config === null || config === void 0 ? void 0 : config.border) === null || _18 === void 0 ? void 0 : _18.borderThickness) ? ((_19 = config === null || config === void 0 ? void 0 : config.border) === null || _19 === void 0 ? void 0 : _19.borderThickness) + "px"
+  --sqm-border-thickness: ${((_14 = config === null || config === void 0 ? void 0 : config.border) === null || _14 === void 0 ? void 0 : _14.borderThickness) ? ((_15 = config === null || config === void 0 ? void 0 : config.border) === null || _15 === void 0 ? void 0 : _15.borderThickness) + "px"
       : "1px"};
 
-  --sqm-accent-color-icon: ${((_21 = (_20 = config === null || config === void 0 ? void 0 : config.color) === null || _20 === void 0 ? void 0 : _20.accentColorShades) === null || _21 === void 0 ? void 0 : _21.icon) || "hsl(0, 0%, 7%)"};
-  --sqm-accent-color-text: ${((_23 = (_22 = config === null || config === void 0 ? void 0 : config.color) === null || _22 === void 0 ? void 0 : _22.accentColorShades) === null || _23 === void 0 ? void 0 : _23.text) || "hsl(0, 0%, 7%)"};    
-  --sqm-accent-color-border: ${((_25 = (_24 = config === null || config === void 0 ? void 0 : config.color) === null || _24 === void 0 ? void 0 : _24.accentColorShades) === null || _25 === void 0 ? void 0 : _25.border) || "hsl(240, 6%, 90%)"};
-  --sqm-accent-color-background: ${((_27 = (_26 = config === null || config === void 0 ? void 0 : config.color) === null || _26 === void 0 ? void 0 : _26.accentColorShades) === null || _27 === void 0 ? void 0 : _27.background) || "hsl(0, 0%, 93%)"};
+  --sqm-accent-color-icon: ${((_17 = (_16 = config === null || config === void 0 ? void 0 : config.color) === null || _16 === void 0 ? void 0 : _16.accentColorShades) === null || _17 === void 0 ? void 0 : _17.icon) || "hsl(0, 0%, 7%)"};
+  --sqm-accent-color-text: ${((_19 = (_18 = config === null || config === void 0 ? void 0 : config.color) === null || _18 === void 0 ? void 0 : _18.accentColorShades) === null || _19 === void 0 ? void 0 : _19.text) || "hsl(0, 0%, 7%)"};    
+  --sqm-accent-color-border: ${((_21 = (_20 = config === null || config === void 0 ? void 0 : config.color) === null || _20 === void 0 ? void 0 : _20.accentColorShades) === null || _21 === void 0 ? void 0 : _21.border) || "hsl(240, 6%, 90%)"};
+  --sqm-accent-color-background: ${((_23 = (_22 = config === null || config === void 0 ? void 0 : config.color) === null || _22 === void 0 ? void 0 : _22.accentColorShades) === null || _23 === void 0 ? void 0 : _23.background) || "hsl(0, 0%, 93%)"};
 
-  --sqm-success-color-icon: ${((_29 = (_28 = config === null || config === void 0 ? void 0 : config.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.iconAndBadge) || "hsl(142, 71%, 45%)"};
-  --sqm-success-color-text: ${((_31 = (_30 = config === null || config === void 0 ? void 0 : config.color) === null || _30 === void 0 ? void 0 : _30.success) === null || _31 === void 0 ? void 0 : _31.text) || "hsl(164, 74%, 15%)"};
-  --sqm-success-color-border: ${((_33 = (_32 = config === null || config === void 0 ? void 0 : config.color) === null || _32 === void 0 ? void 0 : _32.success) === null || _33 === void 0 ? void 0 : _33.border) || "hsl(141, 79%, 85%)"};
-  --sqm-success-color-background: ${((_35 = (_34 = config === null || config === void 0 ? void 0 : config.color) === null || _34 === void 0 ? void 0 : _34.success) === null || _35 === void 0 ? void 0 : _35.background) || "hsl(141, 84%, 93%)"};
+  --sqm-success-color-icon: ${((_25 = (_24 = config === null || config === void 0 ? void 0 : config.color) === null || _24 === void 0 ? void 0 : _24.success) === null || _25 === void 0 ? void 0 : _25.iconAndBadge) || "hsl(142, 71%, 45%)"};
+  --sqm-success-color-text: ${((_27 = (_26 = config === null || config === void 0 ? void 0 : config.color) === null || _26 === void 0 ? void 0 : _26.success) === null || _27 === void 0 ? void 0 : _27.text) || "hsl(164, 74%, 15%)"};
+  --sqm-success-color-border: ${((_29 = (_28 = config === null || config === void 0 ? void 0 : config.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.border) || "hsl(141, 79%, 85%)"};
+  --sqm-success-color-background: ${((_31 = (_30 = config === null || config === void 0 ? void 0 : config.color) === null || _30 === void 0 ? void 0 : _30.success) === null || _31 === void 0 ? void 0 : _31.background) || "hsl(141, 84%, 93%)"};
   
-  --sqm-warning-color-icon: ${((_37 = (_36 = config === null || config === void 0 ? void 0 : config.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.iconAndBadge) || "hsl(38, 92%, 50%)"};
-  --sqm-warning-color-text: ${((_39 = (_38 = config === null || config === void 0 ? void 0 : config.color) === null || _38 === void 0 ? void 0 : _38.warning) === null || _39 === void 0 ? void 0 : _39.text) || "hsl(38, 70%, 24%)"};
-  --sqm-warning-color-border: ${((_41 = (_40 = config === null || config === void 0 ? void 0 : config.color) === null || _40 === void 0 ? void 0 : _40.warning) === null || _41 === void 0 ? void 0 : _41.border) || "hsl(48, 97%, 85%)"};
-  --sqm-warning-color-background: ${((_43 = (_42 = config === null || config === void 0 ? void 0 : config.color) === null || _42 === void 0 ? void 0 : _42.warning) === null || _43 === void 0 ? void 0 : _43.background) || "hsl(48, 97%, 85%)"};
-
-  --sqm-danger-color-icon: ${((_45 = (_44 = config === null || config === void 0 ? void 0 : config.color) === null || _44 === void 0 ? void 0 : _44.critical) === null || _45 === void 0 ? void 0 : _45.iconAndBadge) || "hsl(0, 84%, 60%)"};
-  --sqm-danger-color-text: ${((_47 = (_46 = config === null || config === void 0 ? void 0 : config.color) === null || _46 === void 0 ? void 0 : _46.critical) === null || _47 === void 0 ? void 0 : _47.text) || "hsl(0, 57%, 26%)"};
-  --sqm-danger-color-border: ${((_49 = (_48 = config === null || config === void 0 ? void 0 : config.color) === null || _48 === void 0 ? void 0 : _48.critical) === null || _49 === void 0 ? void 0 : _49.border) || "hsl(0, 97%, 85%)"};
-  --sqm-danger-color-background: ${((_51 = (_50 = config === null || config === void 0 ? void 0 : config.color) === null || _50 === void 0 ? void 0 : _50.critical) === null || _51 === void 0 ? void 0 : _51.background) || "hsl(0, 93%, 94%)"};
-
-  --sqm-informative-color-icon: ${((_53 = (_52 = config === null || config === void 0 ? void 0 : config.color) === null || _52 === void 0 ? void 0 : _52.informative) === null || _53 === void 0 ? void 0 : _53.iconAndBadge) || "hsl(221, 83%, 53%)"};
-  --sqm-informative-color-text: ${((_55 = (_54 = config === null || config === void 0 ? void 0 : config.color) === null || _54 === void 0 ? void 0 : _54.informative) === null || _55 === void 0 ? void 0 : _55.text) || "hsl(221, 75%, 20%)"};
-  --sqm-informative-color-border: ${((_57 = (_56 = config === null || config === void 0 ? void 0 : config.color) === null || _56 === void 0 ? void 0 : _56.informative) === null || _57 === void 0 ? void 0 : _57.border) || "hsl(213, 97%, 85%)"};
-  --sqm-informative-color-background: ${((_59 = (_58 = config === null || config === void 0 ? void 0 : config.color) === null || _58 === void 0 ? void 0 : _58.informative) === null || _59 === void 0 ? void 0 : _59.background) || "hsl(214, 95%, 93%)"};
-
-  --sqm-input-background: ${((_61 = (_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.formFieldColor) === null || _61 === void 0 ? void 0 : _61.background) || "hsla(0, 0%, 100%, 1)"};
-  --sqm-input-border-color: ${((_63 = (_62 = config === null || config === void 0 ? void 0 : config.formFields) === null || _62 === void 0 ? void 0 : _62.formFieldColor) === null || _63 === void 0 ? void 0 : _63.border) || "hsl(240, 6%, 90%)"};
-  --sqm-input-border-radius: ${((_64 = config === null || config === void 0 ? void 0 : config.formFields) === null || _64 === void 0 ? void 0 : _64.borderRadius) ? ((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.borderRadius) + "px"
+  --sqm-warning-color-icon: ${((_33 = (_32 = config === null || config === void 0 ? void 0 : config.color) === null || _32 === void 0 ? void 0 : _32.warning) === null || _33 === void 0 ? void 0 : _33.iconAndBadge) || "hsl(38, 92%, 50%)"};
+  --sqm-warning-color-text: ${((_35 = (_34 = config === null || config === void 0 ? void 0 : config.color) === null || _34 === void 0 ? void 0 : _34.warning) === null || _35 === void 0 ? void 0 : _35.text) || "hsl(38, 70%, 24%)"};
+  --sqm-warning-color-border: ${((_37 = (_36 = config === null || config === void 0 ? void 0 : config.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.border) || "hsl(48, 97%, 85%)"};
+  --sqm-warning-color-background: ${((_39 = (_38 = config === null || config === void 0 ? void 0 : config.color) === null || _38 === void 0 ? void 0 : _38.warning) === null || _39 === void 0 ? void 0 : _39.background) || "hsl(48, 97%, 85%)"};
+
+  --sqm-danger-color-icon: ${((_41 = (_40 = config === null || config === void 0 ? void 0 : config.color) === null || _40 === void 0 ? void 0 : _40.critical) === null || _41 === void 0 ? void 0 : _41.iconAndBadge) || "hsl(0, 84%, 60%)"};
+  --sqm-danger-color-text: ${((_43 = (_42 = config === null || config === void 0 ? void 0 : config.color) === null || _42 === void 0 ? void 0 : _42.critical) === null || _43 === void 0 ? void 0 : _43.text) || "hsl(0, 57%, 26%)"};
+  --sqm-danger-color-border: ${((_45 = (_44 = config === null || config === void 0 ? void 0 : config.color) === null || _44 === void 0 ? void 0 : _44.critical) === null || _45 === void 0 ? void 0 : _45.border) || "hsl(0, 97%, 85%)"};
+  --sqm-danger-color-background: ${((_47 = (_46 = config === null || config === void 0 ? void 0 : config.color) === null || _46 === void 0 ? void 0 : _46.critical) === null || _47 === void 0 ? void 0 : _47.background) || "hsl(0, 93%, 94%)"};
+
+  --sqm-informative-color-icon: ${((_49 = (_48 = config === null || config === void 0 ? void 0 : config.color) === null || _48 === void 0 ? void 0 : _48.informative) === null || _49 === void 0 ? void 0 : _49.iconAndBadge) || "hsl(221, 83%, 53%)"};
+  --sqm-informative-color-text: ${((_51 = (_50 = config === null || config === void 0 ? void 0 : config.color) === null || _50 === void 0 ? void 0 : _50.informative) === null || _51 === void 0 ? void 0 : _51.text) || "hsl(221, 75%, 20%)"};
+  --sqm-informative-color-border: ${((_53 = (_52 = config === null || config === void 0 ? void 0 : config.color) === null || _52 === void 0 ? void 0 : _52.informative) === null || _53 === void 0 ? void 0 : _53.border) || "hsl(213, 97%, 85%)"};
+  --sqm-informative-color-background: ${((_55 = (_54 = config === null || config === void 0 ? void 0 : config.color) === null || _54 === void 0 ? void 0 : _54.informative) === null || _55 === void 0 ? void 0 : _55.background) || "hsl(214, 95%, 93%)"};
+
+  --sqm-input-background: ${((_57 = (_56 = config === null || config === void 0 ? void 0 : config.formFields) === null || _56 === void 0 ? void 0 : _56.formFieldColor) === null || _57 === void 0 ? void 0 : _57.background) || "hsla(0, 0%, 100%, 1)"};
+  --sqm-input-border-color: ${((_59 = (_58 = config === null || config === void 0 ? void 0 : config.formFields) === null || _58 === void 0 ? void 0 : _58.formFieldColor) === null || _59 === void 0 ? void 0 : _59.border) || "hsl(240, 6%, 90%)"};
+  --sqm-input-border-radius: ${((_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.borderRadius) ? ((_61 = config === null || config === void 0 ? void 0 : config.formFields) === null || _61 === void 0 ? void 0 : _61.borderRadius) + "px"
       : "4px"};
-  --sqm-input-color: ${((_67 = (_66 = config === null || config === void 0 ? void 0 : config.formFields) === null || _66 === void 0 ? void 0 : _66.formFieldColor) === null || _67 === void 0 ? void 0 : _67.inputText) || "hsl(0, 0%, 7%)"};
+  --sqm-input-color: ${((_63 = (_62 = config === null || config === void 0 ? void 0 : config.formFields) === null || _62 === void 0 ? void 0 : _62.formFieldColor) === null || _63 === void 0 ? void 0 : _63.inputText) || "hsl(0, 0%, 7%)"};
   --sqm-input-label-color: var(--sqm-text);
-  --sqm-input-border-color-focus: ${((_68 = config === null || config === void 0 ? void 0 : config.formFields) === null || _68 === void 0 ? void 0 : _68.selectedStateColor) || "hsl(0, 0%, 7%)"};
-  --sqm-input-border-color-hover: ${((_69 = config === null || config === void 0 ? void 0 : config.formFields) === null || _69 === void 0 ? void 0 : _69.hoverStateColor) || "hsl(0, 0%, 91%)"};
+  --sqm-input-border-color-focus: ${((_64 = config === null || config === void 0 ? void 0 : config.formFields) === null || _64 === void 0 ? void 0 : _64.selectedStateColor) || "hsl(0, 0%, 7%)"};
+  --sqm-input-border-color-hover: ${((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.hoverStateColor) || "hsl(0, 0%, 91%)"};
 
   --sqm-input-label-font-size: inherit;
   --sqm-input-disabled-color: var(--sqm-text-subdued);
-  --sqm-input-disabled-background: ${((_70 = config === null || config === void 0 ? void 0 : config.formFields) === null || _70 === void 0 ? void 0 : _70.disabledBackgroundColor) || "#F4F4F5"};
+  --sqm-input-disabled-background: ${((_66 = config === null || config === void 0 ? void 0 : config.formFields) === null || _66 === void 0 ? void 0 : _66.disabledBackgroundColor) || "#F4F4F5"};
 
   sl-select::part(display-input),
   sl-select::part(base),
@@ -961,6 +960,6 @@ sl-icon::part(base):hover {
 }
 
 `,
-    font: (_71 = config === null || config === void 0 ? void 0 : config.main) === null || _71 === void 0 ? void 0 : _71.brandFont,
+    font: (_67 = config === null || config === void 0 ? void 0 : config.main) === null || _67 === void 0 ? void 0 : _67.brandFont,
   });
 };

package/dist/collection/global/styles.ts

@@ -586,12 +586,7 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: ${
-    config?.color?.loadingSkeleton?.background || "hsl(240 5.9% 90%)"
-  };
-  --sqm-skeleton-animation-background: ${
-    config?.color?.loadingSkeleton?.animationBackground || "hsl(240 4.8% 95.9%)"
-  };
+  --sqm-skeleton-background: hsl(240, 4%, 91%);
   --sqm-text: ${
     config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)"
   };

package/dist/collection/tables/TableSlots.js

@@ -9,15 +9,15 @@ export function LoadingSlot() {
 export function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))));
+      h("sl-skeleton", null))));
 }
 export function LoadingSkeleton() {
   return (h("div", { style: { width: "100%" } },
-    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
-    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
-    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
-    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
-    h("sqm-skeleton", null)));
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", null)));
 }
 export function EmptySlot({ label }) {
   return (h("slot", { name: "empty" },

package/dist/esm/{ErrorView-74cb3af8.js → ErrorView-bbf0a042.js}

@@ -1,4 +1,4 @@
-import { h } from './index-38ad4957.js';
+import { h } from './index-b3a06de8.js';
 
 const ErrorView = (props) => {
   return (h("sqm-form-message", { type: "error" },

package/dist/esm/{GenericTableView-8c72ac30.js → GenericTableView-e43d310f.js}

@@ -1,4 +1,4 @@
-import { h } from './index-38ad4957.js';
+import { h } from './index-b3a06de8.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-f750863a.js';