@saasquatch/mint-components 1.15.0-61 → 1.15.0-63

package/dist/esm/sqm-big-stat_42.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
-import { b as buildFontsCssUrl, i as intl } from './global-e9173b4c.js';
+import { b as buildFontsCssUrl, i as intl } from './global-75f87c77.js';
 import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, Q as Qe, k as kn } from './index.module-38dad6c9.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
+import { g as getProps, a as getMissingProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-311e6d72.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-6dec9902.js';
+import { C as CopyTextView } from './copy-text-view-8d1713d7.js';
 import { a as useRequestRerender } from './re-render-9c90767d.js';
 import { u as useChildElements } from './useChildElements-4e70ac0e.js';
 import './luxon-bbf75a9d.js';
@@ -16,10 +16,10 @@ import './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-18c2cea7.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
-import { u as usePortalLogin } from './usePortalLogin-61abe78e.js';
+import { u as usePortalLogin } from './usePortalLogin-d0720c81.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-ad9c2893.js';
-import { u as useDemoBigStat, Q as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, i as RewardExchangeView, V as demoRewardExchange, G as useShareButton, a as ShareButtonView, J as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-b07a7e53.js';
+import { u as useDemoBigStat, Q as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, i as RewardExchangeView, V as demoRewardExchange, G as useShareButton, a as ShareButtonView, J as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-2984432d.js';
 import './sqm-portal-container-view-176e92e3.js';
 import { u as usePayoutStatus } from './usePayoutStatus-7eeec61b.js';
 
@@ -311,7 +311,7 @@ const Google = {
     },
     informative: {
       text: "#01368c",
-      border: "#A8DCD7",
+      border: "#BFDBFE",
       background: "#E8F0FE",
       iconAndBadge: "#4285F4",
     },
@@ -1137,14 +1137,14 @@ function DividedLayoutView(props, children) {
       return {
         "border-right": props.borderless
           ? "none"
-          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       };
     }
     else {
       return {
         "border-bottom": props.borderless
           ? "none"
-          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       };
     }
   };
@@ -1205,7 +1205,7 @@ const DividedLayout = class {
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
-    this.dividerStyle = "1px solid #EAEAEA";
+    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
     /**
      * Background color of the divider
      * @uiName Divider Background Color
@@ -2513,33 +2513,6 @@ const style$3 = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  InfoAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
   Dialog: {
     "&::part(panel)": {
       height: "600px",
@@ -2555,6 +2528,13 @@ const style$3 = {
     "&::part(footer)": {},
   },
 };
+const vanillaStyle$1 = `
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet$3 = createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
@@ -2566,8 +2546,6 @@ function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
-        icon: "exclamation-triangle",
-        class: sheet$3.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -2576,8 +2554,6 @@ function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "info-circle",
-          class: sheet$3.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -2590,8 +2566,6 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -2603,8 +2577,6 @@ function PayoutStatusAlertView(props) {
             supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -2616,8 +2588,6 @@ function PayoutStatusAlertView(props) {
             supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -2629,8 +2599,6 @@ function PayoutStatusAlertView(props) {
             supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet$3.classes.ErrorAlertContainer,
         };
       case "HOLD":
         return {
@@ -2643,8 +2611,6 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2653,11 +2619,15 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (h$1("div", { style: { paddingTop: "10px" } },
+          h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h$1("div", { style: { paddingTop: "10px" } },
+          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText))) : (
         // Demo case
-        h$1("sl-button", { type: "default" }, text.informationRequiredButtonText));
+        h$1("div", { style: { paddingTop: "10px" } },
+          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
       case "VERIFICATION:REQUIRED":
-        return (h$1("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
+        return (h$1("div", { style: { paddingTop: "10px" } },
+          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
         return;
     }
@@ -2671,10 +2641,10 @@ function PayoutStatusAlertView(props) {
   }
   return (h$1("div", { part: "sqm-base" },
     h$1("style", { type: "text/css" }, styleString$3),
-    h$1("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
-      h$1("sl-icon", { slot: "icon", name: alertDetails.icon }),
-      h$1("strong", null, alertDetails.header),
-      h$1("p", { class: sheet$3.classes.AlertDescriptionText }, alertDetails.description),
+    h$1("style", { type: "text/css" }, vanillaStyle$1),
+    h$1("sqm-form-message", { type: alertDetails.alertType },
+      h$1("p", { part: "alert-title" }, alertDetails.header),
+      h$1("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));
 }
 
@@ -3237,21 +3207,20 @@ const PortalFrame = class {
      * @uiWidget color
      * @uiType string
      */
-    this.backgroundColor = "var(--sqm-portal-background, #fff);";
-    // TODO: Replace with border variable later
+    this.backgroundColor = "var(--sqm-portal-background, #fff)";
     /**
      * Borders placed to seperate the header and footer from the body content.
      * @uiName Border
      * @uiType string
      */
-    this.border = "1px solid var(--sqm-text, #eaeaea);";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     /**
      * Background color for the header and footer.
      * @uiName Header and Footer Background Color
      * @uiWidget color
      * @uiType string
      */
-    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff);";
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff)";
     h(this);
   }
   disconnectedCallback() { }
@@ -3862,7 +3831,7 @@ const ProgramMenu = class {
   }
 };
 
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
     :host{
       display: block;   
     }
@@ -3900,7 +3869,9 @@ function ReferralCardView(props) {
   const styleString = sheet.toString();
   const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h$1("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
+      border: `${props.hideBorder
+        ? "none"
+        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
@@ -3911,7 +3882,7 @@ function ReferralCardView(props) {
     } },
     h$1("style", { type: "text/css" },
       styleString,
-      vanillaStyle$1),
+      vanillaStyle$2),
     props.hasHeader && (h$1("div", { class: sheet.classes.EndContainer }, props.slots.header)),
     h$1("div", { part: "sqm-column-container", class: sheet.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
@@ -5704,7 +5675,7 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 	:host{
 		display: block; 
 	}
@@ -5764,7 +5735,7 @@ function TimelineEntryView(props) {
   return (h$1("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     h$1("style", { type: "text/css" },
       styleString,
-      vanillaStyle$2),
+      vanillaStyle$3),
     h$1("div", { class: "container", part: "sqm-entry-container" },
       h$1("div", { class: "line" }, "/"),
       h$1("div", { class: "step" },

package/dist/esm/sqm-code-verification.entry.js

@@ -1,9 +1,9 @@
 import { h, r as registerInstance } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { l, k as useState, f as useEffect, n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, t as Pn, F as Fn, i as isDemo, q as En } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { E as ErrorStyles } from './mixins-f750863a.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
@@ -33,6 +33,9 @@ const style = {
   },
   CodeInput: {
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -42,6 +45,9 @@ const style = {
   CodeInputError: {
     ...ErrorStyles,
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -49,7 +55,7 @@ const style = {
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-text)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
@@ -92,7 +98,11 @@ function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+    resendCodeLink: (h("a", { href: "", style: {
+        textDecoration: "underline",
+        color: "inherit",
+        cursor: "pointer",
+      }, onClick: (e) => {
         e.preventDefault();
         callbacks.resendEmail();
       } }, text.resendCodeLabel)),

package/dist/esm/sqm-context-router.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
 import { b as browser, k as useState, i as d, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
 import { _ } from './index.module-38dad6c9.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 
 const debug = browser("sq:useRouter");

package/dist/esm/sqm-email-verification.entry.js

@@ -1,9 +1,9 @@
 import { h, r as registerInstance } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { k as useState, f as useEffect, n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, t as Pn, w as wn, J, $ as $e, i as isDemo, q as En } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE } from './keys-406491dc.js';
@@ -145,13 +145,6 @@ const style = {
     flexDirection: "column",
     maxWidth: "320px",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "&::part(message)": {},
-  },
   ContinueButton: {
     width: "100%",
     maxWidth: "100px",
@@ -185,6 +178,12 @@ const vanillaStyle = `
 :host([hidden]): {
   display: none;
 }
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -200,10 +199,8 @@ function WidgetEmailVerificationView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h("b", null, text.sendCodeErrorHeader),
-      h("br", null),
+    states.sendCodeError && (h("sqm-form-message", { type: "error" },
+      h("p", { part: "alert-title" }, text.sendCodeErrorHeader),
       intl.formatMessage({
         id: "sendCodeErrorDescription",
         defaultMessage: text.sendCodeErrorDescription,

package/dist/esm/sqm-empty_4.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import './index.module-38dad6c9.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import './JSS-67b5cff8.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-176e92e3.js';
 

package/dist/esm/sqm-form-message.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
 
-const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Warning::part(base){background-color:var(--sl-color-warning-100);border-color:var(--sl-color-warning-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
+const sqmFormMessageCss = "sl-alert::part(base){border:var(--sqm-border-thickness) solid;border-radius:var(--sqm-border-radius-normal);font-family:var(--sqm-primary-font)}.Error::part(base){color:var(--sqm-danger-color-text);background-color:var(--sqm-danger-color-background);border-color:var(--sqm-danger-color-border);font-size:14px}.Error::part(icon){color:var(--sqm-danger-color-icon);font-size:24px}.Warning::part(base){color:var(--sqm-warning-color-text);background-color:var(--sqm-warning-color-background);border-color:var(--sqm-warning-color-border)}.Warning::part(icon){color:var(--sqm-warning-color-icon);font-size:24px}.Success::part(base){color:var(--sqm-success-color-text);background-color:var(--sqm-success-color-background);border-color:var(--sqm-success-color-border)}.Success::part(icon){color:var(--sqm-success-color-icon);font-size:24px}.Info::part(base){color:var(--sqm-informative-color-text);background-color:var(--sqm-informative-color-background);border-color:var(--sqm-informative-color-border)}.Info::part(icon){color:var(--sqm-informative-color-icon);font-size:24px}::slotted(*){margin:0}::slotted(*[part=alert-title]){font-size:16px;font-weight:bold}::slotted(*[part=alert-description]),::slotted(*[part=erroralert-text]){font-size:14px}";
 
 const FormMessage = class {
   constructor(hostRef) {
@@ -12,16 +12,16 @@ const FormMessage = class {
   disconnectedCallback() { }
   render() {
     if (this.type === "error") {
-      return (h$1("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true }, h$1("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), h$1("slot", null)));
     }
     else if (this.type === "info") {
-      return (h$1("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, h$1("sl-icon", { slot: "icon", part: "alert-icon", name: `${this.icon ? this.icon : "info-circle"}` }), h$1("slot", null)));
     }
     else if (this.type === "warning") {
-      return (h$1("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true }, h$1("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), h$1("slot", null)));
     }
     else {
-      return (h$1("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
+      return (h$1("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true }, h$1("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
     }
   }
 };

package/dist/esm/sqm-instant-access-registration.entry.js

@@ -5,7 +5,7 @@ import './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { E as EmailRegistrationView } from './email-registration-view-db81655f.js';
+import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
 import './useRegistrationFormState-18c2cea7.js';
 import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-0f04459e.js';
 

package/dist/esm/sqm-invoice-table-data-cell_5.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
-import { l as luxonLocale } from './utils-334c1e34.js';
+import { l as luxonLocale } from './utils-03188de2.js';
 import { l as luxon } from './luxon-bbf75a9d.js';
 
 const InvoiceTableDataCell = class {
@@ -66,7 +66,7 @@ const TableRow = class {
     /**
      * @uiName Border
      */
-    this.border = "1px solid #EAEAEA";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
   }
   render() {
     return (h$1(Host, { style: { display: "contents" } }, h$1("tr", { style: { border: this.border } }, h$1("slot", null))));

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, H, J, w as wn, i as isDemo } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';

package/dist/esm/sqm-logout-current-user.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, J, w as wn, b as setUserIdentity, i as isDemo } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import './JSS-67b5cff8.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-f21e54e3.js';
 

package/dist/esm/sqm-navigation-sidebar-item.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
 import { k as kn, i as isDemo } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-797601b0.js';

package/dist/esm/{sqm-navigation-sidebar-view-6c13798c.js → sqm-navigation-sidebar-view-0a2ec560.js}

@@ -73,7 +73,7 @@ function NavigationSidebarView(props, children) {
   .menu-items {
     display: none;
     padding: 20px;
-    border-right: 1px solid #eaeaea;
+    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
     padding-top: 60px;
     background: var(--sqm-portal-background); 
     width: 100vw;

package/dist/esm/sqm-navigation-sidebar.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
 import { n as h, k as useState, f as useEffect } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo, k as kn, H } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-6c13798c.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0a2ec560.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {

package/dist/esm/sqm-pagination_3.entry.js

@@ -1,13 +1,13 @@
 import { h, F as Fragment, r as registerInstance } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { n as h$1, k as useState } from './dom-context-hooks.module-63370afd.js';
 import { F as Fn, i as isDemo, d as dist, H, J, B, w as wn, $ as $e } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, u as useReferralCodes } from './useReferralCodes-311e6d72.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-6dec9902.js';
+import { C as CopyTextView } from './copy-text-view-8d1713d7.js';
 
 const style = {
   Container: {

package/dist/esm/sqm-password-field.entry.js

@@ -2,7 +2,7 @@ import { h, r as registerInstance } from './index-b3a06de8.js';
 import { i as d, k as useState, n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { E as ErrorStyles } from './mixins-f750863a.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-18c2cea7.js';

package/dist/esm/sqm-popup-container.entry.js

@@ -1,7 +1,7 @@
 import { h, c as Host, r as registerInstance } from './index-b3a06de8.js';
 import { n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import { B } from './index.module-38dad6c9.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 
 const PopupContainerView = (props) => {
   const { states, callbacks } = props;

package/dist/esm/{sqm-portal-email-verification-view-a82e199f.js → sqm-portal-email-verification-view-46311e88.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-f750863a.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';

package/dist/esm/sqm-portal-email-verification.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import './global-e9173b4c.js';
+import './global-75f87c77.js';
 import { k as useState, m as useRef, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
 import { l as ln, n as nn, J, j as jn, u as useCallback, i as isDemo } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import './sqm-text-span-view-4c17b8c9.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-a82e199f.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-46311e88.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/esm/sqm-portal-forgot-password.entry.js

@@ -108,7 +108,7 @@ const PortalForgotPassword = class {
      * @uiName Border style
      * @uiWidget textArea
      */
-    this.border = "1px solid var(--sqm-border-color, #eaeaea)";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     h(this);
   }
   disconnectedCallback() { }

package/dist/esm/sqm-portal-google-login.entry.js

@@ -3,12 +3,12 @@ import { n as h } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo, j as jn } from './index.module-38dad6c9.js';
 import './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import './utils-334c1e34.js';
+import './utils-03188de2.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import './sqm-text-span-view-4c17b8c9.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
-import { u as usePortalLogin } from './usePortalLogin-61abe78e.js';
+import { u as usePortalLogin } from './usePortalLogin-d0720c81.js';
 
 const PortalGoogleLogin = class {
   constructor(hostRef) {

package/dist/esm/{sqm-portal-profile-view-caabc8d3.js → sqm-portal-profile-view-f7cb1c88.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 

package/dist/esm/sqm-portal-profile.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import './global-e9173b4c.js';
+import './global-75f87c77.js';
 import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, J, w as wn, $ as $e, i as isDemo } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-03188de2.js';
 import './JSS-67b5cff8.js';
 import './sqm-text-span-view-4c17b8c9.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-caabc8d3.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-f7cb1c88.js';
 import { i as isEmpty } from './utilities-ad9c2893.js';
 
 const GET_USER = dist.gql `