@muibook/components 2.0.0 → 3.1.0

package/dist/esm/components/mui-smart-card/index.js

@@ -1,4 +1,6 @@
-class b extends HTMLElement {
+import "../mui-body/index.js";
+import "../mui-badge/index.js";
+class u extends HTMLElement {
   static get observedAttributes() {
     return [
       "state",
@@ -24,18 +26,15 @@ class b extends HTMLElement {
     this.render();
   }
   render() {
-    const p = this.getAttribute("state") || "default", l = this.getAttribute("number") || "0000", n = this.getAttribute("bg-color"), o = this.getAttribute("bg-image"), u = this.getAttribute("variant") || "plain", e = this.hasAttribute("inverted"), s = this.getAttribute("type") || "", d = p === "frozen", c = this.getAttribute("logo") || "", g = this.getAttribute("partner") || "", a = this.getAttribute("logo-height"), t = a && !isNaN(parseInt(a, 10)) ? parseInt(a, 10) : void 0;
-    t && t > 126 && console.warn(
-      `[mui-smart-card] The logo height (${t}px) exceeds the recommended maximum of 126px. This may affect vertical alignment or visual consistency.`
-    );
+    const p = this.getAttribute("state") || "default", l = this.getAttribute("number") || "0000", n = this.getAttribute("bg-color"), o = this.getAttribute("bg-image"), b = this.getAttribute("variant") || "plain", t = this.hasAttribute("inverted"), s = this.getAttribute("type") || "", d = p === "frozen", c = this.getAttribute("logo") || "", g = this.getAttribute("partner") || "", a = this.getAttribute("logo-height"), e = a && !isNaN(parseInt(a, 10)) ? parseInt(a, 10) : void 0;
     let r = "card", i = "";
-    u === "animated" ? r += " animated" : r += " plain", o ? i = `
+    b === "animated" ? r += " animated" : r += " plain", o ? i = `
         background-image: url(${o});
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
       ` : n ? i = `background: ${n};` : i = `
-        background: ${e ? "linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%)" : "linear-gradient(180deg, var(--grey-200) 0%, var(--white) 100%)"};
+        background: ${t ? "linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%)" : "linear-gradient(180deg, var(--grey-200) 0%, var(--white) 100%)"};
       `, this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -110,13 +109,13 @@ class b extends HTMLElement {
           object-fit: contain;
           display: block;
           width: auto;
-          height: ${t ? `calc(${t}px / 1.5)` : "auto"};
+          height: ${e ? `calc(${e}px / 1.5)` : "auto"};
         }
 
         @media (min-width: 500px) {
           .logo img {
             width: auto;
-            height: ${t ? `${t}px` : "auto"};
+            height: ${e ? `${e}px` : "auto"};
           }   
         }
 
@@ -124,21 +123,21 @@ class b extends HTMLElement {
         /* =========================================== */
         .type,
         .card-number::part(display) {
-          color: ${e ? "var(--white)" : "var(--black)"};
-          text-shadow: ${e ? "0 0px 8px rgb(0 0 0 / 12%);" : "0 0px 8px rgb(255 255 255 / 12%);"};
+          color: ${t ? "var(--white)" : "var(--black)"};
+          text-shadow: ${t ? "0 0px 8px rgb(0 0 0 / 12%);" : "0 0px 8px rgb(255 255 255 / 12%);"};
         }
 
         img { 
-          filter: ${e ? "drop-shadow(0px 1px 0px var(--black-opacity-60))" : "drop-shadow(0px 1px 0px var(--white-opacity-60))"};
+          filter: ${t ? "drop-shadow(0px 1px 0px var(--black-opacity-60))" : "drop-shadow(0px 1px 0px var(--white-opacity-60))"};
         }
 
 
         .inner {
-          box-shadow: ${e ? "inset 0 1px 0 0 rgb(255 255 255 / 20%), 0 1px 0 0 rgb(0 0 0 / 10%)" : "inset 0 1px 0 0 rgb(255 255 255 / 60%), 0 1px 0 0 rgb(0 0 0 / 40%)"};
+          box-shadow: ${t ? "inset 0 1px 0 0 rgb(255 255 255 / 20%), 0 1px 0 0 rgb(0 0 0 / 10%)" : "inset 0 1px 0 0 rgb(255 255 255 / 60%), 0 1px 0 0 rgb(0 0 0 / 40%)"};
         }
 
         .card.animated .inner::after {
-          background: linear-gradient(${e ? "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 8%) 40%, rgb(255 255 255 / 4%) 40%" : "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 25%) 40%, rgb(255 255 255 / 8%) 40%"});
+          background: linear-gradient(${t ? "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 8%) 40%, rgb(255 255 255 / 4%) 40%" : "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 25%) 40%, rgb(255 255 255 / 8%) 40%"});
         }
 
         /* Type */
@@ -332,4 +331,4 @@ class b extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-smart-card", b);
+customElements.get("mui-smart-card") || customElements.define("mui-smart-card", u);

package/dist/esm/components/mui-stack/hstack/index.js

@@ -49,4 +49,4 @@ class e extends HTMLElement {
     });
   }
 }
-customElements.define("mui-h-stack", e);
+customElements.get("mui-h-stack") || customElements.define("mui-h-stack", e);

package/dist/esm/components/mui-stack/vstack/index.js

@@ -49,4 +49,4 @@ class e extends HTMLElement {
     });
   }
 }
-customElements.define("mui-v-stack", e);
+customElements.get("mui-v-stack") || customElements.define("mui-v-stack", e);

package/dist/esm/components/mui-switch/index.js

@@ -35,11 +35,7 @@ class h extends HTMLElement {
     this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (i = this._checkbox) == null || i.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (s = this._checkbox) == null || s.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
   }
   _updateIcons() {
-    const t = this.shadowRoot.querySelector(
-      'slot[name="on-icon"]'
-    ), e = this.shadowRoot.querySelector(
-      'slot[name="off-icon"]'
-    );
+    const t = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
     t && t.assignedElements().forEach((i) => {
       i.style.display = this._checked ? "inline" : "none";
     }), e && e.assignedElements().forEach((i) => {
@@ -48,9 +44,7 @@ class h extends HTMLElement {
   }
   render() {
     const t = this.getAttribute("label");
-    t || console.warn(
-      "mui-switch Accessibility warning: Provide a 'label' to ensure the switch is described for assistive technologies."
-    ), this.shadowRoot.innerHTML = /*html*/
+    this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host { display: inline-block; }
@@ -140,4 +134,4 @@ class h extends HTMLElement {
     `;
   }
 }
-customElements.define("mui-switch", h);
+customElements.get("mui-switch") || customElements.define("mui-switch", h);

package/dist/esm/components/mui-table/cell/index.js

@@ -64,4 +64,4 @@ class t extends HTMLElement {
   `;
   }
 }
-customElements.define("mui-cell", t);
+customElements.get("mui-cell") || customElements.define("mui-cell", t);

package/dist/esm/components/mui-table/row/index.js

@@ -24,4 +24,4 @@ class t extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-row", t);
+customElements.get("mui-row") || customElements.define("mui-row", t);

package/dist/esm/components/mui-table/row-group/index.js

@@ -21,4 +21,4 @@ class o extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-row-group", o);
+customElements.get("mui-row-group") || customElements.define("mui-row-group", o);

package/dist/esm/components/mui-table/table/index.js

@@ -18,4 +18,4 @@ class t extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-table", t);
+customElements.get("mui-table") || customElements.define("mui-table", t);

package/dist/esm/components/mui-tabs/controller/index.js

@@ -20,4 +20,4 @@ class n extends HTMLElement {
     });
   }
 }
-customElements.define("mui-tab-controller", n);
+customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", n);

package/dist/esm/components/mui-tabs/item/index.js

@@ -13,7 +13,7 @@ class s extends HTMLElement {
     const t = this.getAttribute("icon");
     this.setAttribute("tabindex", this.hasAttribute("active") ? "0" : "-1"), this.shadowRoot.innerHTML = "";
     const i = document.createElement("style");
-    if (i.textContent = /*html*/
+    if (i.textContent = /*css*/
     `
       :host {
         user-select: none;
@@ -58,4 +58,4 @@ class s extends HTMLElement {
     this.classList.toggle("active", t), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
   }
 }
-customElements.define("mui-tab-item", s);
+customElements.get("mui-tab-item") || customElements.define("mui-tab-item", s);

package/dist/esm/components/mui-tabs/panel/index.js

@@ -29,4 +29,4 @@ class e extends HTMLElement {
   attributeChangedCallback(t, s, n) {
   }
 }
-customElements.define("mui-tab-panel", e);
+customElements.get("mui-tab-panel") || customElements.define("mui-tab-panel", e);

package/dist/esm/components/mui-tabs/tab-bar/index.js

@@ -133,4 +133,4 @@ class c extends HTMLElement {
     );
   }
 }
-customElements.define("mui-tab-bar", c);
+customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", c);

package/dist/esm/css/mui-base.css

@@ -40,39 +40,39 @@ textarea {
   border-radius: var(--radius-000);
 }
 
-input[type='text'],
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='file'],
-input[type='search'],
-input[type='range'],
-input[type='button'],
-input[type='submit'],
-input[type='reset'],
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="file"],
+input[type="search"],
+input[type="range"],
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
 button,
 textarea,
 fieldset {
   border: none;
 }
 
-input[type='text'],
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='range'] {
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="range"] {
   height: 4.2rem;
   padding: var(--space-000) var(--space-400);
 }
 
-input[type='text'],
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='file'],
-input[type='search'],
-input[type='range'],
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="file"],
+input[type="search"],
+input[type="range"],
 textarea,
 fieldset {
   box-shadow: inset 0 0 0 2px #e0e0e0;
@@ -113,18 +113,18 @@ select {
 }
 
 /* Radio & Checklist Styles */
-input[type='checkbox'],
-input[type='radio'] {
+input[type="checkbox"],
+input[type="radio"] {
   margin: 0 var(--space-200) 0 0;
 }
 
-input[type='file'] {
+input[type="file"] {
   font-size: var(--text-font-size-xs);
   padding: var(--space-400);
   margin-bottom: var(--space-500);
 }
 
 button:focus,
-input[type='submit']:focus {
+input[type="submit"]:focus {
   box-shadow: inset 0 0 0 1px white;
 }

package/dist/esm/css/mui-tokens.css

@@ -354,6 +354,16 @@ html[data-theme="light"] {
   /* Input */
   --input-background: var(--white);
   --input-background-disabled: var(--grey-100);
+
+  /* Checkbox */
+  --checkbox-background: var(--white);
+  --checkbox-background-checked: var(--grey-900);
+  --checkbox-icon-color-checked: var(--grey-200);
+
+  --checkbox-background-disabled: var(--grey-100);
+  --checkbox-background-checked-disabled: var(--grey-800);
+  --checkbox-icon-color-checked-disabled: var(--grey-100);
+
   /* Addon */
   --addon-background: var(--grey-100);
   /* Tabs */
@@ -370,6 +380,13 @@ html[data-theme="light"] {
 
   /* Carousel */
   --carousel-background: var(--white);
+
+  /* Slat */
+  --slat-background: var(--white-opacity-60);
+  --slat-background-hover: var(--white-opacity-90);
+  --slat-card-background: var(--surface-elevated-100);
+  --slat-card-background-hover: var(--surface-elevated-200);
+  --slat-accessory-background: var(--black-opacity-10);
 }
 
 /* ==================================================================================================== */
@@ -524,6 +541,13 @@ html[data-theme="dark"] {
   /* Input */
   --input-background: var(--grey-900);
   --input-background-disabled: var(--grey-800);
+  /* Checkbox */
+  --checkbox-background: var(--grey-900);
+  --checkbox-background-checked: var(--grey-200);
+  --checkbox-icon-color-checked: var(--grey-900);
+  --checkbox-background-disabled: var(--grey-800);
+  --checkbox-background-checked-disabled: var(--grey-500);
+  --checkbox-icon-color-checked-disabled: var(--grey-900);
   /* Addon */
   --addon-background: var(--grey-1000);
   /* Tabs */
@@ -540,6 +564,13 @@ html[data-theme="dark"] {
 
   /* Carousel */
   --carousel-background: var(--grey-700);
+
+  /* Slat */
+  --slat-background: var(--black-opacity-20);
+  --slat-background-hover: var(--black-opacity-50);
+  --slat-card-background: var(--surface-elevated-100);
+  --slat-card-background-hover: var(--surface-elevated-200);
+  --slat-accessory-background: var(--white-opacity-10);
 }
 
 /* ==================================================================================================== */
@@ -576,7 +607,9 @@ html[data-theme="dark"] {
   --action-attention-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color-focus);
   --action-attention-border-disabled: var(--stroke-size-200) var(--stroke-solid)
     var(--action-attention-border-color-disabled);
-  --action-padding: var(--space-200) var(--space-500);
+  --action-padding: var(--space-200) calc(var(--space-300) + var(--space-100));
+  --action-before-slot-padding: var(--space-300);
+  --action-after-slot-padding: var(--space-300);
   --action-icon-only-padding: var(--space-000);
   --action-radius: var(--radius-100);
   --action-font-size: var(--text-font-size);
@@ -651,4 +684,8 @@ html[data-theme="dark"] {
   --carousel-radius: var(--radius-300);
   --carousel-tab-position: var(--space-400);
   --carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position)); /* Tab Height */
+  /* Slat [Action] */
+  --slat-radius: var(--radius-200);
+  /* Checkbox */
+  --checkbox-radius: var(--radius-100);
 }

package/dist/esm/index.js

@@ -1,15 +1,17 @@
-import { PartTypes as br, Parts as cr, getPartMap as dr } from "./utils/part-map/index.js";
+import { PartTypes as jr, Parts as kr, getPartMap as lr } from "./utils/part-map/index.js";
 import "./components/mui-field/index.js";
 import "./components/mui-file-upload/index.js";
 import "./components/mui-addon/index.js";
 import "./components/mui-input/index.js";
+import "./components/mui-checkbox/index.js";
 import "./components/mui-select/index.js";
 import "./components/mui-switch/index.js";
 import "./components/mui-table/table/index.js";
 import "./components/mui-table/cell/index.js";
 import "./components/mui-table/row/index.js";
 import "./components/mui-table/row-group/index.js";
-import "./components/mui-slat/index.js";
+import "./components/mui-slat/slat/index.js";
+import "./components/mui-slat/accessory/index.js";
 import "./components/mui-accordion/group/index.js";
 import "./components/mui-accordion/inline/index.js";
 import "./components/mui-accordion/block/index.js";
@@ -45,6 +47,8 @@ import "./components/mui-icons/toggle/index.js";
 import "./components/mui-icons/up-arrow/index.js";
 import "./components/mui-icons/up-chevron/index.js";
 import "./components/mui-icons/warning/index.js";
+import "./components/mui-icons/down-arrow-circle/index.js";
+import "./components/mui-icons/ellipsis/index.js";
 import "./components/mui-stack/hstack/index.js";
 import "./components/mui-stack/vstack/index.js";
 import "./components/mui-grid/index.js";
@@ -68,7 +72,7 @@ import "./components/mui-tabs/tab-bar/index.js";
 import "./components/mui-carousel/controller/index.js";
 import "./components/mui-carousel/panel/index.js";
 export {
-  br as PartTypes,
-  cr as Parts,
-  dr as getPartMap
+  jr as PartTypes,
+  kr as Parts,
+  lr as getPartMap
 };

package/dist/types/components/mui-accordion/block/index.d.ts

@@ -1,2 +1,2 @@
 import "../../mui-icons/down-chevron";
-import "../../../components/mui-heading";
+import "../../mui-heading";

package/dist/types/components/mui-accordion/inline/index.d.ts

@@ -1,2 +1,2 @@
 import "../../mui-icons/right-chevron";
-import "../../../components/mui-heading";
+import "../../mui-heading";

package/dist/types/components/mui-alert/index.d.ts

@@ -1 +1,5 @@
-export {};
+import "../mui-body";
+import "../mui-icons/check";
+import "../mui-icons/info";
+import "../mui-icons/warning";
+import "../mui-icons/attention";

package/dist/types/components/mui-checkbox/index.d.ts

@@ -0,0 +1 @@
+import "../mui-body";

package/dist/types/components/mui-field/index.d.ts

@@ -1 +1,3 @@
-export {};
+import "../mui-icons/check";
+import "../mui-icons/warning";
+import "../mui-icons/attention";

package/dist/types/components/mui-file-upload/index.d.ts

@@ -1 +1 @@
-export {};
+import "../mui-button";

package/dist/types/components/mui-icons/down-arrow-circle.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-icons/ellipsis.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-icons/index.d.ts

@@ -22,3 +22,5 @@ import "./toggle";
 import "./up-arrow";
 import "./up-chevron";
 import "./warning";
+import "./down-arrow-circle";
+import "./ellipsis";

package/dist/types/components/mui-message/index.d.ts

@@ -1 +1,6 @@
-export {};
+import "../mui-stack/index";
+import "../mui-icons/message";
+import "../mui-icons/check";
+import "../mui-icons/info";
+import "../mui-icons/warning";
+import "../mui-icons/attention";

package/dist/types/components/mui-select/index.d.ts

@@ -1 +1 @@
-export {};
+import "../mui-icons/down-chevron";

package/dist/types/components/mui-slat/accessory/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-slat/index.d.ts

@@ -1 +1,2 @@
-export {};
+import "./slat";
+import "./accessory";

package/dist/types/components/mui-slat/slat/index.d.ts

@@ -0,0 +1,3 @@
+import "../../mui-button";
+import "../../mui-icons/right-chevron";
+import "../../mui-stack";

package/dist/types/components/mui-smart-card/index.d.ts

@@ -1 +1,2 @@
-export {};
+import "../mui-body";
+import "../mui-badge";

package/dist/types/index.d.ts

@@ -3,13 +3,15 @@ export * from "./components/mui-field";
 export * from "./components/mui-file-upload";
 export * from "./components/mui-addon";
 export * from "./components/mui-input";
+export * from "./components/mui-checkbox";
 export * from "./components/mui-select";
 export * from "./components/mui-switch";
 export * from "./components/mui-table/table";
 export * from "./components/mui-table/cell";
 export * from "./components/mui-table/row";
 export * from "./components/mui-table/row-group";
-export * from "./components/mui-slat";
+export * from "./components/mui-slat/slat";
+export * from "./components/mui-slat/accessory";
 export * from "./components/mui-accordion/group";
 export * from "./components/mui-accordion/inline";
 export * from "./components/mui-accordion/block";
@@ -45,6 +47,8 @@ export * from "./components/mui-icons/toggle";
 export * from "./components/mui-icons/up-arrow";
 export * from "./components/mui-icons/up-chevron";
 export * from "./components/mui-icons/warning";
+export * from "./components/mui-icons/down-arrow-circle";
+export * from "./components/mui-icons/ellipsis";
 export * from "./components/mui-stack/hstack";
 export * from "./components/mui-stack/vstack";
 export * from "./components/mui-grid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muibook/components",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "type": "module",
   "description": "A library of MUI-based design system components.",
   "author": "Michael Trilford",
@@ -216,6 +216,14 @@
       "import": "./dist/esm/components/mui-icons/warning/index.js",
       "types": "./dist/types/components/mui-icons/warning/index.d.ts"
     },
+    "./mui-icons/down-arrow-circle": {
+      "import": "./dist/esm/components/mui-icons/down-arrow-circle/index.js",
+      "types": "./dist/types/components/mui-icons/down-arrow-circle/index.d.ts"
+    },
+    "./mui-icons/ellipsis": {
+      "import": "./dist/esm/components/mui-icons/ellipsis/index.js",
+      "types": "./dist/types/components/mui-icons/ellipsis/index.d.ts"
+    },
     "./mui-image": {
       "import": "./dist/esm/components/mui-image/index.js",
       "types": "./dist/types/components/mui-image/index.d.ts"
@@ -224,6 +232,10 @@
       "import": "./dist/esm/components/mui-input/index.js",
       "types": "./dist/types/components/mui-input/index.d.ts"
     },
+    "./mui-checkbox": {
+      "import": "./dist/esm/components/mui-checkbox/index.js",
+      "types": "./dist/types/components/mui-checkbox/index.d.ts"
+    },
     "./mui-link": {
       "import": "./dist/esm/components/mui-link/index.js",
       "types": "./dist/types/components/mui-link/index.d.ts"
@@ -264,6 +276,14 @@
       "import": "./dist/esm/components/mui-slat/index.js",
       "types": "./dist/types/components/mui-slat/index.d.ts"
     },
+    "./mui-slat/slat": {
+      "import": "./dist/esm/components/mui-slat/slat/index.js",
+      "types": "./dist/types/components/mui-slat/slat/index.d.ts"
+    },
+    "./mui-slat/accessory": {
+      "import": "./dist/esm/components/mui-slat/accessory/index.js",
+      "types": "./dist/types/components/mui-slat/accessory/index.d.ts"
+    },
     "./mui-smart-card": {
       "import": "./dist/esm/components/mui-smart-card/index.js",
       "types": "./dist/types/components/mui-smart-card/index.d.ts"

package/readme.md

@@ -183,6 +183,25 @@ npm publish
 - Use the preview scripts to verify production builds before deployment
 - Follow semantic versioning for releases
 
+#### Adding new components
+
+When adding new components, there are a couple of areas in the build we need to update.
+
+1. vite.config.ts
+   Add the new component’s entry point to the build configuration so it’s bundled into the final output.
+
+2. package.json
+   Ensure the new component is added to the exports field so it can be imported by consumers. If you’re using a files field, include the component path there too.
+
+3. src/index.ts (Central export file)
+   Add an export \* from "./components/..."; line pointing to your new component’s file or directory. This makes it available through your library’s main entry point.
+
+4. src/muibook/index.ts: (Demo Site)
+   If the component relies on global styles or JS utilities for behavior or preview (e.g., for documentation or dev environments), make sure relevant styles or setup files are imported here.
+
+🔍 Note:
+If the component uses an internal index.ts to re-export multiple parts (e.g., mui-icons/index.ts), you only need to reference the directory in your central export:
+
 ### Slot Implementation Approach (MUI Design System)
 
 When implementing slots in MUI components, we use a consistent approach for styling and interaction: