@saasquatch/mint-components 1.16.0-9 → 2.0.0-0

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

@@ -1,10 +1,10 @@
-import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
-import { n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
-import './index.module-89a79f66.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
+import { i as intl } from './global-1099f20d.js';
+import { n as h$1 } from './dom-context-hooks.module-63370afd.js';
+import './index.module-c9811a48.js';
+import { g as getProps } from './utils-84b4b092.js';
 import './JSS-67b5cff8.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-176e92e3.js';
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
@@ -14,7 +14,7 @@ function EmptyStateView(props) {
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, intl.formatMessage({
+        h("p", { part: "description-text" }, intl.formatMessage({
           id: "emptyStateText",
           defaultMessage: emptyStateText,
         }, {
@@ -79,12 +79,6 @@ const PortalContainer = class {
      * @uiEnumNames ["Wrap", "No Wrap"]
      */
     this.flexWrap = "wrap";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff00";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -93,53 +87,6 @@ const PortalContainer = class {
   }
 };
 
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-bold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    margin: 0;
-  }
-`;
 const Text = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -149,6 +96,54 @@ const Text = class {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
+    const vanillaStyle = `
+    sqm-text {
+      display: block;
+      color: ${this.textColor || "var(--sqm-text)"};
+    }
+
+    sqm-text h1 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xxx-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h2 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xx-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h3 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-x-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h4 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-large)"};
+      font-weight: var(--sl-font-weight-bold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text p {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-medium)"};
+      font-weight: var(--sl-font-weight-normal);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text sub {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-small)"};
+      font-weight: var(--sl-font-weight-normal);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+    `;
     return (h("div", null, h("style", null, vanillaStyle), h("slot", null)));
   }
 };

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
+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 #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 #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 #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 #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", { id: "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", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, h$1("sl-icon", { id: "icon", slot: "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", { id: "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", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
     }
   }
 };

package/dist/esm/sqm-google-sign-in.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, e as createEvent, h as h$1, g as getElement } from './index-91e7729f.js';
-import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import { g as getEnvironmentSDK, i as isDemo } from './index.module-89a79f66.js';
+import { r as registerInstance, e as createEvent, h as h$1, g as getElement } from './index-b3a06de8.js';
+import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
+import { g as getEnvironmentSDK, i as isDemo } from './index.module-c9811a48.js';
 
 function useGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);

package/dist/esm/sqm-graphql-client-provider.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
-import { o as m, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import { G, E as Ee, a as Q, P as Pe } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
+import { o as m, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
+import { G, a as Q, E as Ee, P as Pe } from './index.module-c9811a48.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = G();

package/dist/esm/sqm-header-logo.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
+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';
 
 const HeroImage = class {
   constructor(hostRef) {

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { i as isDemo, b as setUserIdentity } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import { n as h } from './dom-context-hooks.module-63370afd.js';
+import { i as isDemo, b as setUserIdentity } from './index.module-c9811a48.js';
 import './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
-import './useRegistrationFormState-d6f33135.js';
-import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dc4ad9f2.js';
+import './mixins-f750863a.js';
+import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
+import './useRegistrationFormState-24d594ea.js';
+import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dda1f52b.js';
 
 const InstantAccessRegistration = class {
   constructor(hostRef) {
@@ -98,7 +98,7 @@ const InstantAccessRegistration = class {
      * @uiGroup Card style
      * @uiType string
      */
-    this.backgroundColor = "#ffffff";
+    this.backgroundColor = "var(--sqm-portal-background)";
     /**
      * @undocumented
      * @uiType boolean

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

@@ -0,0 +1,76 @@
+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-84b4b092.js';
+import { l as luxon } from './luxon-bbf75a9d.js';
+
+const InvoiceTableDataCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return this.data;
+  }
+};
+
+const RewardTableDateCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    this.locale = "en";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a, _b;
+    const date = !this.date
+      ? "-"
+      : (_b = (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(luxon.DateTime.DATE_MED);
+    return date;
+  }
+};
+
+const InvoiceTableDownloadCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const vanillaStyle = `svg:hover, svg:hover * {
+      cursor: pointer;
+    }`;
+    return (h$1(Host, null, h$1("style", null, vanillaStyle), !!this.downloadUrl && (h$1("a", { href: this.downloadUrl, target: "_blank" }, h$1("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h$1("path", { d: "M0.625 12.4375C0.79076 12.4375 0.949732 12.5033 1.06694 12.6206C1.18415 12.7378 1.25 12.8967 1.25 13.0625V16.1875C1.25 16.519 1.3817 16.837 1.61612 17.0714C1.85054 17.3058 2.16848 17.4375 2.5 17.4375H17.5C17.8315 17.4375 18.1495 17.3058 18.3839 17.0714C18.6183 16.837 18.75 16.519 18.75 16.1875V13.0625C18.75 12.8967 18.8158 12.7378 18.9331 12.6206C19.0503 12.5033 19.2092 12.4375 19.375 12.4375C19.5408 12.4375 19.6997 12.5033 19.8169 12.6206C19.9342 12.7378 20 12.8967 20 13.0625V16.1875C20 16.8505 19.7366 17.4864 19.2678 17.9553C18.7989 18.4241 18.163 18.6875 17.5 18.6875H2.5C1.83696 18.6875 1.20107 18.4241 0.732233 17.9553C0.263392 17.4864 0 16.8505 0 16.1875V13.0625C0 12.8967 0.065848 12.7378 0.183058 12.6206C0.300269 12.5033 0.45924 12.4375 0.625 12.4375Z", fill: "var(--sqm-text-subdued)" }), h$1("path", { d: "M9.5575 14.88C9.61556 14.9382 9.68453 14.9844 9.76046 15.0159C9.83639 15.0474 9.91779 15.0636 10 15.0636C10.0822 15.0636 10.1636 15.0474 10.2395 15.0159C10.3155 14.9844 10.3844 14.9382 10.4425 14.88L14.1925 11.13C14.3099 11.0126 14.3758 10.8535 14.3758 10.6875C14.3758 10.5215 14.3099 10.3624 14.1925 10.245C14.0751 10.1276 13.916 10.0617 13.75 10.0617C13.584 10.0617 13.4249 10.1276 13.3075 10.245L10.625 12.9288V1.9375C10.625 1.77174 10.5592 1.61277 10.4419 1.49556C10.3247 1.37835 10.1658 1.3125 10 1.3125C9.83424 1.3125 9.67527 1.37835 9.55806 1.49556C9.44085 1.61277 9.375 1.77174 9.375 1.9375V12.9288L6.6925 10.245C6.57514 10.1276 6.41597 10.0617 6.25 10.0617C6.08403 10.0617 5.92486 10.1276 5.8075 10.245C5.69014 10.3624 5.62421 10.5215 5.62421 10.6875C5.62421 10.8535 5.69014 11.0126 5.8075 11.13L9.5575 14.88Z", fill: "var(--sqm-text-subdued)" }))))));
+  }
+};
+
+const TableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @uiName Column span  */
+    this.colspan = 1;
+    /** @uiName Padding */
+    this.padding = "15px 10px";
+  }
+  render() {
+    return (h$1(Host, { style: { display: "contents" } }, h$1("td", { colSpan: this.colspan, style: { padding: this.padding } }, h$1("slot", null))));
+  }
+};
+
+const TableRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Border
+     */
+    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))));
+  }
+};
+
+export { InvoiceTableDataCell as sqm_invoice_table_data_cell, RewardTableDateCell as sqm_invoice_table_date_cell, InvoiceTableDownloadCell as sqm_invoice_table_download_cell, TableCell as sqm_table_cell, TableRow as sqm_table_row };

package/dist/esm/{sqm-lead-checkbox-field-view-a8c1c78e.js → sqm-lead-checkbox-field-view-cbafee07.js}

@@ -1,5 +1,5 @@
-import { h } from './index-91e7729f.js';
-import { i as intl } from './global-be1f9992.js';
+import { h } from './index-b3a06de8.js';
+import { i as intl } from './global-1099f20d.js';
 import { j as jss, a as create } from './JSS-67b5cff8.js';
 
 const style = {

package/dist/esm/sqm-lead-checkbox-field.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
-import './global-be1f9992.js';
-import { i as isDemo } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import './global-1099f20d.js';
+import { i as d, n as h } from './dom-context-hooks.module-63370afd.js';
+import { i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { a as getMissingProps, g as getProps } from './utils-334c1e34.js';
+import { a as getMissingProps, g as getProps } from './utils-84b4b092.js';
 import './JSS-67b5cff8.js';
-import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
-import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-a8c1c78e.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-c379e5d7.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-cbafee07.js';
 
 function useLeadCheckboxField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);

package/dist/esm/{sqm-lead-input-field-view-4ede5d7f.js → sqm-lead-input-field-view-f3775c28.js}

@@ -1,7 +1,7 @@
-import { h } from './index-91e7729f.js';
-import { i as intl } from './global-be1f9992.js';
+import { h } from './index-b3a06de8.js';
+import { i as intl } from './global-1099f20d.js';
 import { j as jss, a as create } from './JSS-67b5cff8.js';
-import { E as ErrorStyles } from './mixins-83f90fa1.js';
+import { E as ErrorStyles } from './mixins-f750863a.js';
 
 const style = {
   ErrorStyle: ErrorStyles,

package/dist/esm/sqm-lead-input-field.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
-import './global-be1f9992.js';
-import { i as isDemo } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import './global-1099f20d.js';
+import { i as d, n as h } from './dom-context-hooks.module-63370afd.js';
+import { i as isDemo } from './index.module-c9811a48.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-84b4b092.js';
 import './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-4ede5d7f.js';
+import './mixins-f750863a.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-c379e5d7.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-f3775c28.js';
 
 function useLeadInputField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);

package/dist/esm/sqm-leaderboard-rank-view-18baae5b.js

@@ -0,0 +1,8 @@
+import { h } from './index-b3a06de8.js';
+
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return (h("span", { style: { marginTop: "0px", fontSize: "var(--sl-font-size-small)" } }, data.rank));
+}
+
+export { LeaderboardRankView as L };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
-import { d as dist, H, J, w as wn, i as isDemo } from './index.module-89a79f66.js';
+import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
+import { i as intl } from './global-1099f20d.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-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-18baae5b.js';
 
 const GET_RANK = dist.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -48,7 +48,7 @@ function useLeaderboardRank(props) {
   };
 }
 
-const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sl-color-gray-800);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sl-color-gray-500);margin:0px}";
+const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sqm-text);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sqm-text-subdued);margin:0px}";
 
 const LeaderboardRank = class {
   constructor(hostRef) {

package/dist/esm/{sqm-logout-current-user-view-8ef8180f.js → sqm-logout-current-user-view-f21e54e3.js}

@@ -1,4 +1,4 @@
-import { h } from './index-91e7729f.js';
+import { h } from './index-b3a06de8.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { d as dist, J, w as wn, b as setUserIdentity, i as isDemo } from './index.module-89a79f66.js';
+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-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-84b4b092.js';
 import './JSS-67b5cff8.js';
-import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-f21e54e3.js';
 
 const GET_USER_DETAILS = dist.gql `
   query getUserDetails {

package/dist/esm/sqm-navigation-sidebar-item-view-5a452423.js

@@ -0,0 +1,54 @@
+import { h } from './index-b3a06de8.js';
+import { j as jn } from './index.module-c9811a48.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { g as gap } from './mixins-f750863a.js';
+
+function NavigationSidebarItemView(props) {
+  const { states, data, padding = "x-small" } = props;
+  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-primary-button-background-hover)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-button-background)";
+  const textFocusedColor = props.textFocusedColor || "var(--sqm-primary-button-color)";
+  const style = {
+    ItemContainer: {
+      display: "flex",
+      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
+      padding: `var(--sl-spacing-${padding})`,
+      "text-decoration": "none",
+      color: states.active
+        ? textFocusedColor
+        : props.textColor || "var(--sqm-text)",
+      "align-items": "center",
+      ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
+      "&:hover": {
+        cursor: "pointer",
+        background: states.active
+          ? backgroundFocusedColor
+          : backgroundHoverColor,
+        color: states.active
+          ? textFocusedColor
+          : props.textHoverColor || "var(--sqm-primary-button-color-hover)",
+      },
+    },
+    Label: {
+      margin: "0",
+    },
+    Icon: {
+      "flex-shrink": "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
+      e.preventDefault();
+      jn.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    h("p", { class: sheet.classes.Label, part: "sqm-label" }, data.label)));
+}
+
+export { NavigationSidebarItemView as N };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { k as kn, i as isDemo } from './index.module-89a79f66.js';
+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-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-334c1e34.js';
+import { g as getProps } from './utils-84b4b092.js';
 import './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8f1c72bc.js';
+import './mixins-f750863a.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-5a452423.js';
 
 function useNavigationSidebarItem(props) {
   const currentPage = kn();
@@ -16,14 +16,29 @@ function useNavigationSidebarItem(props) {
     data: {
       label: props.label,
       icon: props.icon,
-      path: props.path
+      path: props.path,
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   };
 }
 
 const NavigationSidebarItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @uiName Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.padding = "x-small";
     h(this);
   }
   disconnectedCallback() { }
@@ -43,6 +58,14 @@ function useSidebarItemDemo(props) {
       label: props.label || "Dashboard",
       icon: props.icon || "house",
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

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

@@ -1,6 +1,7 @@
-import { h } from './index-91e7729f.js';
+import { h } from './index-b3a06de8.js';
 
-const vanillaStyle = `
+function NavigationSidebarView(props, children) {
+  const vanillaStyle = `
 
 * {
   padding: 0;
@@ -8,6 +9,16 @@ const vanillaStyle = `
   box-sizing: border-box;
 }
 
+.container {
+  background: var(--sqm-portal-background);
+}
+
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 @keyframes slideIn {
   0% {
     left: -350px;
@@ -59,12 +70,12 @@ const vanillaStyle = `
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items { 
+  .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: white; 
+    background: var(--sqm-portal-background); 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -128,7 +139,7 @@ const vanillaStyle = `
   .toggler:checked ~ .hamburger > .line:nth-child(2),
   .toggler:checked ~ .hamburger > .line:nth-child(3) {
     width: 75%;
-    border-bottom: 3px solid #444445;
+    border-bottom: 3px solid ${props.mobileMenuColor};
     margin: 0;
   }
 
@@ -138,11 +149,10 @@ const vanillaStyle = `
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid #444445;
+    border-bottom: 5px solid ${props.mobileMenuColor};
   }
 }
 `;
-function NavigationSidebarView(props, children) {
   return (h("div", { class: "container", part: "sqm-base" },
     h("style", null, vanillaStyle),
     h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),