@saasquatch/mint-components 1.15.0-17 → 1.15.0-19

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

@@ -9,7 +9,7 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6f35d2ee.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-5dfd2b52.js');
 
 function useNavigationSidebarItem(props) {
   const currentPage = index_module.kn();
@@ -20,14 +20,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) {
     index.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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -47,6 +62,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/cjs/{sqm-navigation-sidebar-view-17111896.js → sqm-navigation-sidebar-view-38a5227a.js}

@@ -2,7 +2,8 @@
 
 const index = require('./index-a29c60ef.js');
 
-const vanillaStyle = `
+function NavigationSidebarView(props, children) {
+  const vanillaStyle = `
 
 * {
   padding: 0;
@@ -10,6 +11,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;
@@ -61,12 +72,12 @@ const vanillaStyle = `
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items { 
+  .menu-items {
     display: none;
     padding: 20px;
     border-right: 1px solid #eaeaea;
     padding-top: 60px;
-    background: white; 
+    background: var(--sqm-portal-background); 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -130,7 +141,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;
   }
 
@@ -140,11 +151,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 (index.h("div", { class: "container", part: "sqm-base" },
     index.h("style", null, vanillaStyle),
     index.h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),

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

@@ -5,21 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 const index_module = require('./index.module-ee84433d.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
+const cjs = require('./cjs-1066ec21.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-38a5227a.js');
 
 const NavigationSidebar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * @uiName Text color
+     * @uiWidget color
+     * @format color
+     * @uiGroup Style
+     */
+    this.mobileMenuColor = "var(--sqm-text, #444445)";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = useNavigationSidebar();
+    const props = index_module.isDemo()
+      ? useDemoNavigationSidebar(this)
+      : useNavigationSidebar(this);
     return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, props), index.h("slot", null)));
   }
 };
-function useNavigationSidebar() {
+function useNavigationSidebar(props) {
   const location = index_module.kn();
   const programId = index_module.H();
   const [checked, setChecked] = stencilHooks_module.useState(false);
@@ -31,9 +41,15 @@ function useNavigationSidebar() {
     setChecked(e.target.checked);
   }
   return {
+    mobileMenuColor: props.mobileMenuColor,
     checked,
     onClick,
   };
 }
+function useDemoNavigationSidebar(props) {
+  return cjs.cjs({
+    mobileMenuColor: props.mobileMenuColor,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
 
 exports.sqm_navigation_sidebar = NavigationSidebar;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-19fe8600.js');
+const global = require('./global-f06aabc0.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
@@ -29,7 +29,7 @@ const style = {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PaginationView(props) {
-  const { states, callbacks, text } = props;
+  const { states, callbacks, text, buttonType } = props;
   const { onNext, onPrev } = callbacks;
   const { currentPage, totalPages, loading } = states;
   if (totalPages === 1)
@@ -37,10 +37,10 @@ function PaginationView(props) {
   return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString),
     !loading && (index.h(index.Fragment, null,
-      index.h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      index.h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
         index.h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
       index.h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
-    index.h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+    index.h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       index.h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }
 
@@ -79,6 +79,15 @@ const Pagination = class {
      * @uiName Pagination text
      */
     this.paginationText = "{currentPage} of {totalPages}";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "secondary";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -97,6 +106,7 @@ function useDemoPagination(props) {
       totalPages: 5,
       loading: false,
     },
+    buttonType: props.buttonType,
     callbacks: {
       onNext: () => setCurrentPage(currentPage + 1),
       onPrev: () => setCurrentPage(currentPage - 1),

package/dist/cjs/{sqm-portal-email-verification-view-9f7b86a9.js → sqm-portal-email-verification-view-969cf926.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-19fe8600.js');
+const global = require('./global-f06aabc0.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-19fe8600.js');
+require('./global-f06aabc0.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
 require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-9f7b86a9.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-969cf926.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/{sqm-portal-profile-view-e77710f0.js → sqm-portal-profile-view-96e936cf.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-19fe8600.js');
+const global = require('./global-f06aabc0.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-19fe8600.js');
+require('./global-f06aabc0.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-e77710f0.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-96e936cf.js');
 const utilities = require('./utilities-78f5e169.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-19fe8600.js');
+const global = require('./global-f06aabc0.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-19fe8600.js');
+const global = require('./global-f06aabc0.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-19fe8600.js');
+require('./global-f06aabc0.js');
 const index_module = require('./index.module-ee84433d.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
@@ -22,22 +22,22 @@ require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-55b378dc.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6f35d2ee.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-9f7b86a9.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-38a5227a.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-5dfd2b52.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-969cf926.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-b986086e.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-84e99287.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-1b2440c3.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-4377d849.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-e77710f0.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-96e936cf.js');
 require('./utilities-78f5e169.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52fc50fe.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4f837226.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
-const ShadowViewAddon = require('./ShadowViewAddon-974f6839.js');
+const ShadowViewAddon = require('./ShadowViewAddon-d958d324.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-55066ec6.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-431faed1.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -233,7 +233,7 @@ export class BigStat {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Stat font size",
+            "text": "Stat font weight",
             "name": "uiName"
           }, {
             "text": "Style",
@@ -245,7 +245,7 @@ export class BigStat {
             "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
             "name": "uiEnumNames"
           }],
-        "text": "Font size of the stat text in pixels"
+        "text": "Font weight of the stat text"
       },
       "attribute": "stat-font-weight",
       "reflect": false

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function DividedLayoutView(props, children) {
+  console.log("background color is ", props.backgroundColor);
   const getBorder = () => {
     if (props.direction === "row") {
       return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
@@ -11,6 +12,7 @@ export function DividedLayoutView(props, children) {
   };
   const style = {
     LayoutContainer: {
+      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -26,7 +28,8 @@ export function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
+    background-color: var(--sqm-portal-background);
+    color: var(--sqm-text);
     overflow-x: clip;
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -18,6 +18,12 @@ export class DividedLayout {
      * @uiName Border style
      */
     this.dividerStyle = "1px solid #EAEAEA";
+    /**
+     * Background color of the divider
+     * @uiName Divider Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -100,6 +106,30 @@ export class DividedLayout {
       "attribute": "divider-style",
       "reflect": false,
       "defaultValue": "\"1px solid #EAEAEA\""
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Divider Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Background color of the divider"
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"#FFFFFF\""
     }
   }; }
 }

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-const vanillaStyle = `
+export function NavigationSidebarView(props, children) {
+  const vanillaStyle = `
 
 * {
   padding: 0;
@@ -7,6 +8,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;
@@ -58,12 +69,12 @@ const vanillaStyle = `
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items { 
+  .menu-items {
     display: none;
     padding: 20px;
     border-right: 1px solid #eaeaea;
     padding-top: 60px;
-    background: white; 
+    background: var(--sqm-portal-background); 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -127,7 +138,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;
   }
 
@@ -137,11 +148,10 @@ const vanillaStyle = `
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid #444445;
+    border-bottom: 5px solid ${props.mobileMenuColor};
   }
 }
 `;
-export 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)),

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -1,8 +1,9 @@
-import { useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
+import { isDemo, useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, State } from "@stencil/core";
-import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { Component, h, Prop, State } from "@stencil/core";
+import { NavigationSidebarView, } from "./sqm-navigation-sidebar-view";
+import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Sidebar
  * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
@@ -12,21 +13,92 @@ import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
 export class NavigationSidebar {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Text color
+     * @uiWidget color
+     * @format color
+     * @uiGroup Style
+     */
+    this.mobileMenuColor = "var(--sqm-text, #444445)";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = useNavigationSidebar();
+    const props = isDemo()
+      ? useDemoNavigationSidebar(this)
+      : useNavigationSidebar(this);
     return (h(NavigationSidebarView, Object.assign({}, props),
       h("slot", null)));
   }
   static get is() { return "sqm-navigation-sidebar"; }
   static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "mobileMenuColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "mobile-menu-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-text, #444445)\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<NavigationSidebarViewProps>",
+        "resolved": "{ onClick?: (e: MouseEvent) => void; checked?: boolean; mobileMenuColor?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "NavigationSidebarViewProps": {
+            "location": "import",
+            "path": "./sqm-navigation-sidebar-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
   static get states() { return {
     "ignored": {}
   }; }
 }
-function useNavigationSidebar() {
+function useNavigationSidebar(props) {
   const location = useCurrentPage();
   const programId = useProgramId();
   const [checked, setChecked] = useState(false);
@@ -38,7 +110,13 @@ function useNavigationSidebar() {
     setChecked(e.target.checked);
   }
   return {
+    mobileMenuColor: props.mobileMenuColor,
     checked,
     onClick,
   };
 }
+function useDemoNavigationSidebar(props) {
+  return deepmerge({
+    mobileMenuColor: props.mobileMenuColor,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.js

@@ -4,21 +4,32 @@ import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
   const { states, data } = props;
+  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sl-color-gray-50)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sl-color-gray-200)";
+  const textFocusedColor = props.textFocusedColor || "var(--sqm-text)";
   const style = {
     ItemContainer: {
       display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
+      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
+      padding: `var(--sl-spacing-${props.padding})`,
       "text-decoration": "none",
-      color: "#454444",
+      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
-          ? "var(--sl-color-gray-300)"
-          : "var(--sl-color-gray-50)",
+          ? backgroundFocusedColor
+          : backgroundHoverColor,
+        color: states.active
+          ? textFocusedColor
+          : props.textHoverColor || "var(--sqm-text)",
       },
     },
     Label: {