impact-ui 4.0.0-alpha.2 → 4.0.0-alpha.4

package/MIGRATION_GUIDE.md

@@ -1,5 +1,35 @@
 # Migrating to impact-ui v4.0
 
+## Private npm packages `@impactsmartsuite/*` (v5.0+)
+
+The UI library and MCP server are published to [npm](https://www.npmjs.com/) under the **impactsmartsuite** organization as **private** scoped packages:
+
+- `@impactsmartsuite/impact-ui`
+- `@impactsmartsuite/impact-ui-mcp-server`
+
+Your npm user (or CI token) must have permission to install and publish these packages on that org. Authenticate against the default registry (`https://registry.npmjs.org/`):
+
+```bash
+npm login
+```
+
+For automation, use a granular access token with **read/publish** as appropriate and configure `~/.npmrc` or environment-based auth (for example `//registry.npmjs.org/:_authToken=${NPM_TOKEN}`). Do not commit tokens.
+
+**Install:**
+
+```bash
+npm install @impactsmartsuite/impact-ui
+```
+
+**Imports** (same subpath style as before, with the scoped package name):
+
+```tsx
+import { Button, Badge } from '@impactsmartsuite/impact-ui';
+import { Button } from '@impactsmartsuite/impact-ui/Button';
+```
+
+---
+
 ## Quick Start: Tree Shaking Migration (2 minutes)
 
 Version 4.0 introduces **tree shaking support** for significantly smaller bundle sizes. Follow these steps to migrate:
@@ -7,7 +37,7 @@ Version 4.0 introduces **tree shaking support** for significantly smaller bundle
 ### Step 1: Update the Package
 
 ```bash
-npm install impact-ui@latest
+npm install @impactsmartsuite/impact-ui@latest
 ```
 
 ### Step 2: Run Automatic Migration
@@ -20,15 +50,15 @@ This will automatically transform all your barrel imports to direct imports:
 
 **Before:**
 ```tsx
-import { Button, Input, Card, Alert } from 'impact-ui';
+import { Button, Input, Card, Alert } from '@impactsmartsuite/impact-ui';
 ```
 
 **After:**
 ```tsx
-import { Button } from 'impact-ui/Button';
-import { Input } from 'impact-ui/Input';
-import { Card } from 'impact-ui/Card';
-import { Alert } from 'impact-ui/Alert';
+import { Button } from '@impactsmartsuite/impact-ui/Button';
+import { Input } from '@impactsmartsuite/impact-ui/Input';
+import { Card } from '@impactsmartsuite/impact-ui/Card';
+import { Alert } from '@impactsmartsuite/impact-ui/Alert';
 ```
 
 ### Step 3: Verify Changes
@@ -260,7 +290,7 @@ If you see warnings about unknown exports:
 
 ### ESLint rule not working
 
-1. Ensure the plugin is installed: `npm install impact-ui`
+1. Ensure the plugin is installed: `npm install @impactsmartsuite/impact-ui`
 2. Restart your IDE/editor
 3. Check ESLint is configured correctly
 

package/README.md

@@ -1,6 +1,6 @@
-# impact-ui
+# @impactsmartsuite/impact-ui
 
-Impact Analytics UI Component Library - A modern, accessible React component library built with TypeScript and Vite.
+Impact Analytics UI Component Library - A modern, accessible React component library built with TypeScript and Vite (private npm package).
 
 ## Features
 
@@ -15,7 +15,7 @@ Impact Analytics UI Component Library - A modern, accessible React component lib
 ## Installation
 
 ```bash
-npm install impact-ui
+npm install @impactsmartsuite/impact-ui
 ```
 
 ## Usage
@@ -23,8 +23,8 @@ npm install impact-ui
 ### Basic Example
 
 ```typescript
-import { Button } from 'impact-ui';
-import 'impact-ui/styles';
+import { Button } from '@impactsmartsuite/impact-ui';
+import '@impactsmartsuite/impact-ui/styles';
 
 function App() {
   return (
@@ -38,7 +38,7 @@ function App() {
 ### TypeScript Support
 
 ```typescript
-import { Button, type ButtonProps } from 'impact-ui';
+import { Button, type ButtonProps } from '@impactsmartsuite/impact-ui';
 
 const props: ButtonProps = {
   variant: 'primary',

package/bin/migrate.js

@@ -73,12 +73,12 @@ ${colors.bright}Examples:${colors.reset}
 
 ${colors.bright}What it does:${colors.reset}
   ${colors.red}Before:${colors.reset}
-    import { Button, Input, Card } from 'impact-ui';
+    import { Button, Input, Card } from '@impactsmartsuite/impact-ui';
 
   ${colors.green}After:${colors.reset}
-    import { Button } from 'impact-ui/Button';
-    import { Input } from 'impact-ui/Input';
-    import { Card } from 'impact-ui/Card';
+    import { Button } from '@impactsmartsuite/impact-ui/Button';
+    import { Input } from '@impactsmartsuite/impact-ui/Input';
+    import { Card } from '@impactsmartsuite/impact-ui/Card';
 
 ${colors.bright}Benefits:${colors.reset}
   - Enables tree shaking for smaller bundle sizes
@@ -202,7 +202,7 @@ function main() {
       `${colors.red}Error: Transform file not found at ${transformPath}${colors.reset}`
     );
     console.error('This might indicate a corrupted impact-ui installation.');
-    console.error('Try reinstalling: npm install impact-ui');
+    console.error('Try reinstalling: npm install @impactsmartsuite/impact-ui');
     process.exit(1);
   }
 

package/codemods/transform.js

@@ -6,15 +6,21 @@
  *
  * Before:
  *   import { Button, Input, Card } from 'impact-ui';
+ *   import { Button, Input, Card } from '@impactsmartsuite/impact-ui';
  *
  * After:
  *   import { Button } from 'impact-ui/Button';
- *   import { Input } from 'impact-ui/Input';
- *   import { Card } from 'impact-ui/Card';
+ *   import { Button } from '@impactsmartsuite/impact-ui/Button';
  */
 
 const { buildExportLookup } = require('./component-map');
 
+const BARREL_SOURCES = ['impact-ui', '@impactsmartsuite/impact-ui'];
+
+function rewriteTargetPath(componentMapPath, barrelSource) {
+  return componentMapPath.replace(/^impact-ui(?=\/|$)/, barrelSource);
+}
+
 // Build the export lookup once at module load time
 const exportLookup = buildExportLookup();
 
@@ -30,15 +36,13 @@ module.exports = function transformer(fileInfo, api, options) {
   const root = j(fileInfo.source);
   let hasChanges = false;
 
-  // Find all imports from 'impact-ui' (barrel import)
   root
-    .find(j.ImportDeclaration, {
-      source: { value: 'impact-ui' },
-    })
+    .find(j.ImportDeclaration)
+    .filter((path) => BARREL_SOURCES.includes(path.node.source.value))
     .forEach((path) => {
+      const barrelSource = path.node.source.value;
       const specifiers = path.node.specifiers;
 
-      // Handle different import types
       const namedSpecifiers = specifiers.filter(
         (s) => s.type === 'ImportSpecifier'
       );
@@ -49,22 +53,18 @@ module.exports = function transformer(fileInfo, api, options) {
         (s) => s.type === 'ImportNamespaceSpecifier'
       );
 
-      // Skip namespace imports (import * as ImpactUI from 'impact-ui')
-      // These can't be automatically migrated
       if (namespaceSpecifier) {
         console.warn(
           `Warning: Cannot migrate namespace import in ${fileInfo.path}. ` +
-            'Please manually update: import * as ... from "impact-ui"'
+            `Please manually update: import * as ... from "${barrelSource}"`
         );
         return;
       }
 
-      // Skip if no named imports
       if (namedSpecifiers.length === 0) {
         return;
       }
 
-      // Group specifiers by their target path
       const groupedImports = {};
       const unknownImports = [];
 
@@ -83,11 +83,10 @@ module.exports = function transformer(fileInfo, api, options) {
         }
       });
 
-      // Create new import declarations
       const newImports = [];
 
-      // Add grouped imports (known components)
       Object.entries(groupedImports).forEach(([targetPath, imports]) => {
+        const mappedPath = rewriteTargetPath(targetPath, barrelSource);
         const newSpecifiers = imports.map(({ importedName, localName }) => {
           if (importedName === localName) {
             return j.importSpecifier(j.identifier(importedName));
@@ -97,37 +96,33 @@ module.exports = function transformer(fileInfo, api, options) {
             j.identifier(localName)
           );
         });
-        newImports.push(j.importDeclaration(newSpecifiers, j.literal(targetPath)));
+        newImports.push(j.importDeclaration(newSpecifiers, j.literal(mappedPath)));
       });
 
-      // Keep unknown imports in a barrel import (if any)
       if (unknownImports.length > 0) {
         const unknownNames = unknownImports.map((s) => s.imported.name).join(', ');
         console.warn(
           `Warning: Unknown imports in ${fileInfo.path}: ${unknownNames}. ` +
-            'These will remain as barrel imports. Please check if they exist in impact-ui.'
+            'These will remain as barrel imports. Please check if they exist in the package.'
         );
         newImports.push(
-          j.importDeclaration(unknownImports, j.literal('impact-ui'))
+          j.importDeclaration(unknownImports, j.literal(barrelSource))
         );
       }
 
-      // Handle default import if present (keep it separate)
       if (defaultSpecifier) {
         console.warn(
           `Warning: Default import found in ${fileInfo.path}. ` +
-            'impact-ui does not have a default export. Please check your import.'
+            'The library does not have a default export. Please check your import.'
         );
       }
 
-      // Replace the original import with new imports
       if (newImports.length > 0) {
         j(path).replaceWith(newImports);
         hasChanges = true;
       }
     });
 
-  // Return transformed source or null if no changes
   if (hasChanges) {
     return root.toSource({
       quote: 'single',
@@ -138,5 +133,4 @@ module.exports = function transformer(fileInfo, api, options) {
   return null;
 };
 
-// Set the parser to handle TSX files
 module.exports.parser = 'tsx';

package/dist/components/Accordion/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
-import default_1 from "../../node_modules/@mui/icons-material/ExpandMore.js";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import MUIAccordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
 /* empty css                      */
-import Accordion$1 from "../../node_modules/@mui/material/Accordion/Accordion.js";
-import AccordionSummary from "../../node_modules/@mui/material/AccordionSummary/AccordionSummary.js";
-import AccordionDetails from "../../node_modules/@mui/material/AccordionDetails/AccordionDetails.js";
 const Accordion = forwardRef(
   ({
     expanded,
@@ -58,7 +58,7 @@ const Accordion = forwardRef(
           ref,
           className: `impact_accordion_main_container impact_accordion_main_container_single ${className}`.trim(),
           children: /* @__PURE__ */ jsxs(
-            Accordion$1,
+            MUIAccordion,
             {
               className: "accordion_main_container",
               defaultExpanded: expanded === singleData.value,
@@ -73,7 +73,7 @@ const Accordion = forwardRef(
                   {
                     "aria-controls": `${singleData.value}-content`,
                     className: "accordion_header",
-                    expandIcon: /* @__PURE__ */ jsx(default_1, {}),
+                    expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
                     id: `${singleData.value}-header`,
                     children: singleData.header
                   }
@@ -88,7 +88,7 @@ const Accordion = forwardRef(
     return /* @__PURE__ */ jsx("div", { ref, className: `impact_accordion_main_container ${className}`.trim(), children: data.map((item, index) => {
       const isExpanded = isMultiExpanded ? Array.isArray(expanded) && expanded.includes(item.value) : expanded === item.value;
       return /* @__PURE__ */ jsxs(
-        Accordion$1,
+        MUIAccordion,
         {
           className: "accordion_main_container",
           defaultExpanded: isExpanded,
@@ -104,7 +104,7 @@ const Accordion = forwardRef(
               {
                 "aria-controls": `${item.value}-content`,
                 className: "accordion_header",
-                expandIcon: /* @__PURE__ */ jsx(default_1, {}),
+                expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
                 id: `${item.value}-header`,
                 children: item.header
               }

package/dist/components/AccordionModern/SortableAccordionComp.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { useSensors, useSensor, DndContext, closestCenter, DragOverlay, TouchSensor, MouseSensor } from "../../node_modules/@dnd-kit/core/dist/core.esm.js";
-import { arrayMove, SortableContext, useSortable } from "../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
-import { CSS } from "../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
-import default_1 from "../../node_modules/@mui/icons-material/DragIndicator.js";
-import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
+import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 function SortableAccordionComp({
   item,
   handleMultiAccordionChange,
@@ -41,7 +41,7 @@ function SortableAccordionComp({
           className: "impact-modern-accordion-drag-icon",
           ...isOverlay ? {} : { ...attributes, ...listeners },
           "aria-label": "Drag to reorder",
-          children: /* @__PURE__ */ jsx(default_1, {})
+          children: /* @__PURE__ */ jsx(DragIndicatorIcon, {})
         }
       ),
       /* @__PURE__ */ jsx(
@@ -63,7 +63,7 @@ function SortableAccordionComp({
               handleMultiAccordionChange(item.value);
             }
           },
-          children: /* @__PURE__ */ jsx(default_1$1, {})
+          children: /* @__PURE__ */ jsx(KeyboardArrowRightIcon, {})
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "impact-modern-accordion-title", children: item.header })

package/dist/components/AccordionModern/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import { Badge } from "../Badge/index.js";
 import { SortableAccordionList } from "./SortableAccordionComp.js";
 /* empty css                            */
@@ -83,7 +83,7 @@ function AccordionModern({
                 {
                   "aria-hidden": true,
                   className: `impact-modern-accordion-expand-icon ${checkExpand(item)}-icon`,
-                  children: /* @__PURE__ */ jsx(default_1, {})
+                  children: /* @__PURE__ */ jsx(KeyboardArrowRightIcon, {})
                 }
               ),
               /* @__PURE__ */ jsxs(

package/dist/components/Alert/index.js

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import default_1$1 from "../../node_modules/@mui/icons-material/Cancel.js";
-import default_1$4 from "../../node_modules/@mui/icons-material/CheckCircle.js";
-import default_1 from "../../node_modules/@mui/icons-material/Close.js";
-import default_1$3 from "../../node_modules/@mui/icons-material/Info.js";
-import default_1$2 from "../../node_modules/@mui/icons-material/Warning.js";
+import CancelIcon from "@mui/icons-material/Cancel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import InfoIcon from "@mui/icons-material/Info";
+import WarningIcon from "@mui/icons-material/Warning";
+import MUIAlert from "@mui/material/Alert";
+import MUIAlertTitle from "@mui/material/AlertTitle";
 import { Button } from "../Button/index.js";
 /* empty css                  */
-import Alert$1 from "../../node_modules/@mui/material/Alert/Alert.js";
-import AlertTitle from "../../node_modules/@mui/material/AlertTitle/AlertTitle.js";
 const Alert = forwardRef(
   ({
     severity,
@@ -26,23 +26,23 @@ const Alert = forwardRef(
     const classStr = `ia-styles ia-alert ${subtleBackground ? "ia-subtleBackground" : ""} ${className}`.trim();
     const displayTitle = title ?? severity.charAt(0).toUpperCase() + severity.slice(1);
     return /* @__PURE__ */ jsxs(
-      Alert$1,
+      MUIAlert,
       {
         ref,
         "aria-live": severity === "error" ? "assertive" : "polite",
         className: classStr,
         iconMapping: {
-          success: /* @__PURE__ */ jsx(default_1$4, { fontSize: "small" }),
-          info: /* @__PURE__ */ jsx(default_1$3, { fontSize: "small" }),
-          warning: /* @__PURE__ */ jsx(default_1$2, { fontSize: "small" }),
-          error: /* @__PURE__ */ jsx(default_1$1, { fontSize: "small" })
+          success: /* @__PURE__ */ jsx(CheckCircleIcon, { fontSize: "small" }),
+          info: /* @__PURE__ */ jsx(InfoIcon, { fontSize: "small" }),
+          warning: /* @__PURE__ */ jsx(WarningIcon, { fontSize: "small" }),
+          error: /* @__PURE__ */ jsx(CancelIcon, { fontSize: "small" })
         },
         role: "alert",
         severity,
         ...args,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "ia-alert-body", children: [
-            /* @__PURE__ */ jsx(AlertTitle, { children: displayTitle }),
+            /* @__PURE__ */ jsx(MUIAlertTitle, { children: displayTitle }),
             actionName && onAction ? /* @__PURE__ */ jsx(
               Button,
               {
@@ -62,7 +62,7 @@ const Alert = forwardRef(
                 size: "small",
                 variant: "text",
                 onClick: onClose,
-                children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" })
+                children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
               }
             ) : null
           ] }),

package/dist/components/Avatar/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import MUIAvatar from "@mui/material/Avatar";
 /* empty css                   */
-import Avatar$1 from "../../node_modules/@mui/material/Avatar/Avatar.js";
 const Avatar = forwardRef(
   ({
     label = "Unknown",
@@ -42,7 +42,7 @@ const Avatar = forwardRef(
       return retVal.trim();
     }, [size, className]);
     return /* @__PURE__ */ jsx(
-      Avatar$1,
+      MUIAvatar,
       {
         ref,
         alt: alt ?? label,

package/dist/components/Badge/filled/filledIconLabelBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                                  */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function FilledIconLabelBadges({
   label,
   icon,

package/dist/components/Badge/filled/filledOnlyIconBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                                 */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function FilledOnlyIconBadges({ color, icon, size, ...args }) {
   const getFilledBadgesColor = (colorValue) => {
     switch (colorValue) {

package/dist/components/Badge/filled/filledOnlyLabelBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                                  */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function FilledOnlyLabelBadges({
   label,
   color,

package/dist/components/Badge/stroke/strokeIconLabelBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                                  */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function StrokeIconLabelBadges({
   color,
   label,

package/dist/components/Badge/stroke/strokeOnlyIconBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                                 */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function StrokeOnlyIconBadges({ color, icon, size, ...args }) {
   const getStrokeBadgesColor = (colorValue) => {
     switch (colorValue) {

package/dist/components/Badge/stroke/strokeOnlyLabelBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                                  */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function StrokeOnlyLabelBadges({
   color,
   size,

package/dist/components/Badge/subtle/subtleIOnlyIconBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                           */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function SubtleOnlyIconBadges({
   color,
   icon,

package/dist/components/Badge/subtle/subtleIconLabelBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                           */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function SubtleIconLabelBadges({
   label,
   icon,

package/dist/components/Badge/subtle/subtleOnlyLabelBadges/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
 /* empty css                           */
-import Chip from "../../../../node_modules/@mui/material/Chip/Chip.js";
 function SubtleOnlyLabelBadges({
   label,
   color,

package/dist/components/Breadcrumbs/index.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
-import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
-import default_1 from "../../node_modules/@mui/icons-material/MoreHoriz.js";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import MUIBreadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import MuiMenu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 import { HomeIcon } from "./HomeIcon.js";
 /* empty css                        */
-import Link from "../../node_modules/@mui/material/Link/Link.js";
-import Menu from "../../node_modules/@mui/material/Menu/Menu.js";
-import MenuItem from "../../node_modules/@mui/material/MenuItem/MenuItem.js";
-import Breadcrumbs$1 from "../../node_modules/@mui/material/Breadcrumbs/Breadcrumbs.js";
 function Breadcrumbs({ list, className = "" }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const isOpen = Boolean(anchorEl);
@@ -69,12 +69,12 @@ function Breadcrumbs({ list, className = "" }) {
                 handleClick(e);
               }
             },
-            children: /* @__PURE__ */ jsx(default_1, {})
+            children: /* @__PURE__ */ jsx(MoreHorizIcon, {})
           },
           "extras"
         ),
         /* @__PURE__ */ jsx(
-          Menu,
+          MuiMenu,
           {
             anchorEl,
             anchorOrigin: { vertical: "bottom", horizontal: "left" },
@@ -105,11 +105,11 @@ function Breadcrumbs({ list, className = "" }) {
     return temp;
   }, [list, isOpen]);
   return /* @__PURE__ */ jsx(
-    Breadcrumbs$1,
+    MUIBreadcrumbs,
     {
       "aria-label": "breadcrumb",
       className,
-      separator: /* @__PURE__ */ jsx(default_1$1, { sx: { height: "15px", width: "12px" } }),
+      separator: /* @__PURE__ */ jsx(KeyboardArrowRightIcon, { sx: { height: "15px", width: "12px" } }),
       sx: { lineHeight: "21px" },
       children: breadCrumbList
     }

package/dist/components/Button/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import MUIButton from "@mui/material/Button";
 /* empty css                   */
-import Button$1 from "../../node_modules/@mui/material/Button/Button.js";
 const Button = forwardRef(
   ({
     children,
@@ -108,12 +108,12 @@ const Button = forwardRef(
       ...args
     };
     if (iconPlacement === "right") {
-      return /* @__PURE__ */ jsxs(Button$1, { ...commonProps, children: [
+      return /* @__PURE__ */ jsxs(MUIButton, { ...commonProps, children: [
         finalLabel,
         finalIcon
       ] });
     }
-    return /* @__PURE__ */ jsxs(Button$1, { ...commonProps, children: [
+    return /* @__PURE__ */ jsxs(MUIButton, { ...commonProps, children: [
       finalIcon,
       finalLabel
     ] });

package/dist/components/ButtonGroup/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import MUIToggleButton from "@mui/material/ToggleButton";
+import MUIButtonGroup from "@mui/material/ToggleButtonGroup";
 /* empty css                        */
-import ToggleButtonGroup from "../../node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup.js";
-import ToggleButton$1 from "../../node_modules/@mui/material/ToggleButton/ToggleButton.js";
 function ToggleButton({ selfProps, parentProps }) {
   const { icon, label, disabled: selfDisabled, onClick: _onClick, ...restSelf } = selfProps;
   const { selectedOption, isDisabled } = parentProps;
@@ -19,7 +19,7 @@ function ToggleButton({ selfProps, parentProps }) {
     }
     return retVal;
   }, [selfDisabled, isDisabled, selfProps.value, selectedOption, icon]);
-  return /* @__PURE__ */ jsxs(ToggleButton$1, { disableRipple: true, className: buttonClassName, ...restSelf, children: [
+  return /* @__PURE__ */ jsxs(MUIToggleButton, { disableRipple: true, className: buttonClassName, ...restSelf, children: [
     icon,
     label
   ] });
@@ -40,7 +40,7 @@ function ButtonGroup({
     return `${retVal} ${className}`.trim();
   }, [isDisabled, className]);
   return /* @__PURE__ */ jsx(
-    ToggleButtonGroup,
+    MUIButtonGroup,
     {
       ...args,
       exclusive: true,

package/dist/components/Card/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import MUICard from "@mui/material/Card";
 /* empty css                 */
-import Card$1 from "../../node_modules/@mui/material/Card/Card.js";
 const Card = forwardRef(
   ({
     children,
@@ -36,7 +36,7 @@ const Card = forwardRef(
       }
     };
     return /* @__PURE__ */ jsx(
-      Card$1,
+      MUICard,
       {
         ref,
         "aria-label": ariaLabel,