@saasquatch/mint-components 2.0.4-9 → 2.0.5-0

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

@@ -112,6 +112,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",
@@ -547,7 +557,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)),
@@ -565,8 +575,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 },
@@ -580,8 +590,8 @@ export const TaxAndCashDashboardView = (props) => {
             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-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet.classes.TooltipContainer },

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

@@ -287,10 +287,14 @@ export const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  function isDisabledInput(field) {
+  function isDisabledPartnerInput(field) {
     var _a;
     return states.isPartner && !!((_a = data.partnerData) === null || _a === void 0 ? void 0 : _a[field]);
   }
+  function isDisabledUserInput(field) {
+    var _a;
+    return states.isUser && !!((_a = states.formState) === null || _a === void 0 ? void 0 : _a[field]);
+  }
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
@@ -321,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",
@@ -332,21 +336,21 @@ export const UserInfoFormView = (props) => {
       h("div", null,
         h("div", { class: classes.InputContainer },
           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 ||
-              isDisabledInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+              isDisabledUserInput("firstName") ||
+              isDisabledPartnerInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled ||
-              states.isUser ||
-              isDisabledInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+              isDisabledUserInput("lastName") ||
+              isDisabledPartnerInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
           h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
-          h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledPartnerInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -363,7 +367,7 @@ export const UserInfoFormView = (props) => {
             h("p", null, text.phoneNumber),
             h("div", { class: classes.PhoneInputsContainer },
               h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled ||
-                  isDisabledInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+                  isDisabledPartnerInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
                 class: classes.ErrorInput,
               }
                 : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
@@ -389,7 +393,7 @@ export const UserInfoFormView = (props) => {
                   // Naive phone number validation
                   validateBillingField(/[a-zA-Z]+/, value) &&
                     formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
-                }, disabled: states.disabled || isDisabledInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                }, disabled: states.disabled || isDisabledPartnerInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -397,7 +401,7 @@ export const UserInfoFormView = (props) => {
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+              formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.address, formState.errors.address),
           }
@@ -405,22 +409,22 @@ export const UserInfoFormView = (props) => {
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+              formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
-          !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
+          !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledPartnerInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (h("sl-menu-item", { value: r.value }, r.label))))),
-          h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
+          h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledPartnerInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+          h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.currency, formState.errors.currency),
           }

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/{IndirectTaxDetailsView-a7dd6e4c.js → IndirectTaxDetailsView-8dec05e4.js}

@@ -1,7 +1,7 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { f as formatErrorMessage } from './utils-fafc712f.js';
+import { f as formatErrorMessage } from './utils-2695a43e.js';
 
 const style = {
   Description: {

package/dist/esm/{ShadowViewAddon-fe2896cb.js → ShadowViewAddon-78a1c35c.js}

@@ -1,5 +1,5 @@
 import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.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, j as jn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -2095,11 +2095,11 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -2109,9 +2109,9 @@ function TaskCardView(props) {
               : "",
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
@@ -2384,7 +2384,7 @@ const EditProfileView = (props) => {
         } }, text.editprofileheader),
       h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
         h("div", { class: "FormSection" },
-          states.formState.error && (h("sqm-form-message", { loading: states.loading, type: "error", exportparts: "erroralert-icon" },
+          states.formState.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
             h("div", { part: "erroralert-text" }, states.formState.error))),
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
@@ -2497,10 +2497,10 @@ function LeaderboardView(props) {
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("table", null, [...Array(5)].map(() => {
+      h("table", null, [...Array(10)].map(() => {
         return (h("tr", null,
           h("td", null,
-            h("sqm-skeleton", null))));
+            h("sl-skeleton", null))));
       }))));
   }
   if (!states.hasLeaders)
@@ -3692,19 +3692,19 @@ function RewardExchangeView(props) {
         h("sl-card", { class: sheet$8.classes.Card },
           h("div", { class: sheet$8.classes.CardLayout },
             h("div", null,
-              h("sqm-skeleton", { style: {
+              h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
                   margin: "9px",
-                }, width: "100px", height: "100px" })),
+                  "--border-radius": "var(--sqm-border-radius-normal)",
+                } })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                 width: "100%",
-                display: "flex",
-                flexDirection: "column",
-                gap: "var(--sl-spacing-small)",
               } },
-              h("sqm-skeleton", null),
-              h("sqm-skeleton", null),
-              h("sqm-skeleton", { width: "45%" }))))));
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { width: "45%" } }))))));
     })));
   }
   function errorMessage() {
@@ -4376,7 +4376,7 @@ function LeadFormView(props) {
         vanillaStyle$7,
         styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
+      h("sqm-form-message", { exportparts: "success-icon" },
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
@@ -4387,14 +4387,16 @@ function LeadFormView(props) {
         styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "error" },
-          h("p", { part: "alert-title" }, content.submitErrorHeader),
-          h("p", { part: "alert-text" }, intl.formatMessage({
+        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet$9.classes.ErrorAlertContainer, open: true },
+          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          h("b", null, content.submitErrorHeader),
+          h("br", null),
+          intl.formatMessage({
             id: "submitErrorDescription",
             defaultMessage: content.submitErrorDescription,
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          })))),
+          }))),
         h("div", { class: sheet$9.classes.NameFieldWrapper },
           h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
           h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),