impact-ui 3.7.25 → 4.0.0-alpha.10

package/bin/migrate.js

@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+
+/**
+ * impact-ui Migration CLI Tool
+ *
+ * Transforms barrel imports to direct imports for tree shaking optimization.
+ *
+ * Usage:
+ *   npx impact-ui-migrate ./src
+ *   npx impact-ui-migrate ./src --dry
+ *   npx impact-ui-migrate ./src --extensions tsx,ts
+ */
+
+const { execSync, spawnSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+// ANSI color codes for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+};
+
+/**
+ * Print styled header
+ */
+function printHeader() {
+  console.log(`
+${colors.cyan}╔═══════════════════════════════════════════════════════════════╗
+║                  ${colors.bright}impact-ui Migration Tool${colors.reset}${colors.cyan}                     ║
+╠═══════════════════════════════════════════════════════════════╣
+║  Transforms barrel imports to direct imports for tree shaking  ║
+╚═══════════════════════════════════════════════════════════════╝${colors.reset}
+`);
+}
+
+/**
+ * Print help message
+ */
+function printHelp() {
+  printHeader();
+  console.log(`
+${colors.bright}Usage:${colors.reset}
+  npx impact-ui-migrate <target-path> [options]
+
+${colors.bright}Arguments:${colors.reset}
+  <target-path>     Path to the directory or file to transform
+
+${colors.bright}Options:${colors.reset}
+  --dry             Run without making changes (preview mode)
+  --extensions      File extensions to transform (default: tsx,ts,jsx,js)
+  --verbose         Show detailed output
+  --help, -h        Show this help message
+
+${colors.bright}Examples:${colors.reset}
+  ${colors.dim}# Migrate all files in src directory${colors.reset}
+  npx impact-ui-migrate ./src
+
+  ${colors.dim}# Preview changes without applying them${colors.reset}
+  npx impact-ui-migrate ./src --dry
+
+  ${colors.dim}# Migrate only TypeScript files${colors.reset}
+  npx impact-ui-migrate ./src --extensions tsx,ts
+
+  ${colors.dim}# Migrate a specific file${colors.reset}
+  npx impact-ui-migrate ./src/components/MyComponent.tsx
+
+${colors.bright}What it does:${colors.reset}
+  ${colors.red}Before:${colors.reset}
+    import { Button, Input, Card } from '@impactsmartsuite/impact-ui';
+
+  ${colors.green}After:${colors.reset}
+    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
+  - Only imports the components you use
+  - Can reduce bundle size by up to 80%
+
+${colors.bright}More info:${colors.reset}
+  See MIGRATION_GUIDE.md for detailed documentation.
+`);
+}
+
+/**
+ * Parse command line arguments
+ * @param {string[]} args - Command line arguments
+ * @returns {object} Parsed arguments
+ */
+function parseArgs(args) {
+  const result = {
+    targetPath: null,
+    isDryRun: false,
+    extensions: 'tsx,ts,jsx,js',
+    verbose: false,
+    showHelp: false,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === '--help' || arg === '-h') {
+      result.showHelp = true;
+    } else if (arg === '--dry') {
+      result.isDryRun = true;
+    } else if (arg === '--verbose' || arg === '-v') {
+      result.verbose = true;
+    } else if (arg === '--extensions' || arg === '-e') {
+      result.extensions = args[++i] || result.extensions;
+    } else if (arg.startsWith('--extensions=')) {
+      result.extensions = arg.split('=')[1];
+    } else if (!arg.startsWith('-')) {
+      result.targetPath = arg;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Check if jscodeshift is available
+ * @returns {boolean} True if jscodeshift is available
+ */
+function checkJscodeshift() {
+  try {
+    execSync('npx jscodeshift --version', { stdio: 'pipe' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Count files that will be processed
+ * @param {string} targetPath - Target path
+ * @param {string} extensions - File extensions
+ * @returns {number} Number of files
+ */
+function countFiles(targetPath, extensions) {
+  const extArray = extensions.split(',').map((e) => e.trim());
+  let count = 0;
+
+  function walkDir(dir) {
+    if (!fs.existsSync(dir)) return;
+
+    const stat = fs.statSync(dir);
+    if (stat.isFile()) {
+      const ext = path.extname(dir).slice(1);
+      if (extArray.includes(ext)) count++;
+      return;
+    }
+
+    if (!stat.isDirectory()) return;
+
+    const files = fs.readdirSync(dir);
+    for (const file of files) {
+      // Skip node_modules and hidden directories
+      if (file === 'node_modules' || file.startsWith('.')) continue;
+      walkDir(path.join(dir, file));
+    }
+  }
+
+  walkDir(targetPath);
+  return count;
+}
+
+/**
+ * Main function
+ */
+function main() {
+  const args = process.argv.slice(2);
+  const options = parseArgs(args);
+
+  // Show help if requested or no arguments
+  if (options.showHelp || args.length === 0) {
+    printHelp();
+    process.exit(0);
+  }
+
+  // Validate target path
+  if (!options.targetPath) {
+    console.error(`${colors.red}Error: Please provide a target path${colors.reset}`);
+    console.log('\nRun with --help for usage information.');
+    process.exit(1);
+  }
+
+  // Resolve paths
+  const transformPath = path.resolve(__dirname, '../codemods/transform.js');
+  const absoluteTargetPath = path.resolve(process.cwd(), options.targetPath);
+
+  // Check if transform file exists
+  if (!fs.existsSync(transformPath)) {
+    console.error(
+      `${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 @impactsmartsuite/impact-ui');
+    process.exit(1);
+  }
+
+  // Check if target exists
+  if (!fs.existsSync(absoluteTargetPath)) {
+    console.error(`${colors.red}Error: Path does not exist: ${absoluteTargetPath}${colors.reset}`);
+    process.exit(1);
+  }
+
+  printHeader();
+
+  // Count files to process
+  const fileCount = countFiles(absoluteTargetPath, options.extensions);
+
+  console.log(`${colors.bright}Configuration:${colors.reset}`);
+  console.log(`  Target:      ${colors.cyan}${absoluteTargetPath}${colors.reset}`);
+  console.log(`  Extensions:  ${colors.cyan}${options.extensions}${colors.reset}`);
+  console.log(`  Files:       ${colors.cyan}~${fileCount} files to scan${colors.reset}`);
+  console.log(
+    `  Mode:        ${options.isDryRun ? `${colors.yellow}Dry run (no changes)${colors.reset}` : `${colors.green}Live${colors.reset}`}`
+  );
+  console.log('');
+
+  // Check for jscodeshift
+  if (!checkJscodeshift()) {
+    console.log(`${colors.yellow}Installing jscodeshift...${colors.reset}`);
+  }
+
+  console.log(`${colors.bright}Running migration...${colors.reset}\n`);
+
+  // Build jscodeshift command arguments
+  const jscodeshiftArgs = [
+    'jscodeshift',
+    '-t',
+    transformPath,
+    absoluteTargetPath,
+    `--extensions=${options.extensions}`,
+    '--parser=tsx',
+    '--ignore-pattern=**/node_modules/**',
+    '--ignore-pattern=**/*.test.*',
+    '--ignore-pattern=**/*.spec.*',
+    '--ignore-pattern=**/*.stories.*',
+  ];
+
+  if (options.isDryRun) {
+    jscodeshiftArgs.push('--dry');
+  }
+
+  if (options.verbose) {
+    jscodeshiftArgs.push('--verbose=2');
+  }
+
+  try {
+    const result = spawnSync('npx', jscodeshiftArgs, {
+      stdio: 'inherit',
+      shell: true,
+    });
+
+    if (result.status !== 0) {
+      console.error(`\n${colors.red}Migration encountered errors.${colors.reset}`);
+      process.exit(result.status || 1);
+    }
+
+    console.log(`\n${colors.green}${colors.bright}Migration complete!${colors.reset}\n`);
+
+    if (options.isDryRun) {
+      console.log(`${colors.yellow}This was a dry run. No files were changed.${colors.reset}`);
+      console.log('Run without --dry to apply the changes.\n');
+    } else {
+      console.log(`${colors.bright}Next steps:${colors.reset}`);
+      console.log(`  1. Review changes: ${colors.cyan}git diff${colors.reset}`);
+      console.log(`  2. Run your tests: ${colors.cyan}npm test${colors.reset}`);
+      console.log(`  3. Add ESLint rule to prevent regression:`);
+      console.log(`     ${colors.dim}// .eslintrc.js${colors.reset}`);
+      console.log(`     ${colors.cyan}plugins: ['impact-ui'],${colors.reset}`);
+      console.log(
+        `     ${colors.cyan}rules: { 'impact-ui/no-barrel-import': 'error' }${colors.reset}`
+      );
+      console.log('');
+    }
+  } catch (error) {
+    console.error(`\n${colors.red}Migration failed: ${error.message}${colors.reset}`);
+    process.exit(1);
+  }
+}
+
+// Run main function
+main();

package/codemods/component-map.js

@@ -0,0 +1,153 @@
+/**
+ * Component mapping configuration for impact-ui migration
+ * Maps component names to their sub-path imports for tree shaking
+ */
+
+const componentMap = {
+  // Accordion
+  Accordion: {
+    path: 'impact-ui/Accordion',
+    exports: ['Accordion', 'AccordionProps'],
+  },
+
+  // Alert
+  Alert: {
+    path: 'impact-ui/Alert',
+    exports: ['Alert', 'AlertProps'],
+  },
+
+  // Avatar
+  Avatar: {
+    path: 'impact-ui/Avatar',
+    exports: ['Avatar', 'AvatarProps'],
+  },
+
+  // Badge
+  Badge: {
+    path: 'impact-ui/Badge',
+    exports: [
+      'Badge',
+      'BadgeProps',
+      'FilledBadge',
+      'FilledIconLabelBadges',
+      'FilledOnlyIconBadges',
+      'FilledOnlyLabelBadges',
+      'StrokeBadge',
+      'StrokeIconLabelBadges',
+      'StrokeOnlyIconBadges',
+      'StrokeOnlyLabelBadges',
+      'SubtleBadge',
+      'SubtleIconLabelBadges',
+      'SubtleOnlyIconBadges',
+      'SubtleOnlyLabelBadges',
+    ],
+  },
+
+  // Button
+  Button: {
+    path: 'impact-ui/Button',
+    exports: ['Button', 'ButtonProps'],
+  },
+
+  // Card
+  Card: {
+    path: 'impact-ui/Card',
+    exports: ['Card', 'CardProps'],
+  },
+
+  // Checkbox
+  Checkbox: {
+    path: 'impact-ui/Checkbox',
+    exports: [
+      'Checkbox',
+      'CheckboxProps',
+      'DashedCheckbox',
+      'DefaultCheckbox',
+      'CheckboxWithDropDown',
+      'CheckboxWithoutFormLabel',
+    ],
+  },
+
+  // Chips
+  Chips: {
+    path: 'impact-ui/Chips',
+    exports: ['Chips', 'ChipsProps', 'Chip'],
+  },
+
+  // Input
+  Input: {
+    path: 'impact-ui/Input',
+    exports: ['Input', 'InputProps', 'InputWithIcon', 'VanillaInput', 'HelperText'],
+  },
+
+  // Switch
+  Switch: {
+    path: 'impact-ui/Switch',
+    exports: ['Switch', 'SwitchProps'],
+  },
+
+  // Tag
+  Tag: {
+    path: 'impact-ui/Tag',
+    exports: ['Tag', 'TagProps', 'FilledTag', 'StrokeTag', 'SolidTag'],
+  },
+
+  // Tooltip
+  Tooltip: {
+    path: 'impact-ui/Tooltip',
+    exports: ['Tooltip', 'TooltipProps'],
+  },
+
+  // Utils - matches any import ending with Props or utils
+  utils: {
+    path: 'impact-ui/utils',
+    exports: [],
+  },
+
+  // Types
+  types: {
+    path: 'impact-ui/types',
+    exports: [],
+  },
+};
+
+/**
+ * Build a reverse lookup map: export name -> import path
+ * This allows O(1) lookup of where to import any given export from
+ */
+function buildExportLookup() {
+  const lookup = {};
+
+  Object.entries(componentMap).forEach(([componentName, config]) => {
+    // Add the component name itself as a valid import
+    lookup[componentName] = config.path;
+
+    // Add all named exports for this component
+    config.exports.forEach((exportName) => {
+      lookup[exportName] = config.path;
+    });
+  });
+
+  return lookup;
+}
+
+/**
+ * Get list of all valid component paths
+ */
+function getValidPaths() {
+  return Object.values(componentMap).map((config) => config.path);
+}
+
+/**
+ * Get all component names
+ */
+function getComponentNames() {
+  return Object.keys(componentMap);
+}
+
+module.exports = {
+  componentMap,
+  buildExportLookup,
+  getValidPaths,
+  getComponentNames,
+};

package/codemods/image-paths-transform.js

@@ -0,0 +1,69 @@
+const fs = require('fs');
+
+function loadMappings(mapFile) {
+  if (!mapFile) return [];
+  try {
+    const raw = fs.readFileSync(mapFile, 'utf8');
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (m) =>
+        m &&
+        typeof m.oldPath === 'string' &&
+        typeof m.newPath === 'string' &&
+        m.oldPath.length > 0 &&
+        m.newPath.length > 0
+    );
+  } catch {
+    return [];
+  }
+}
+
+module.exports = function transformer(fileInfo, api, options) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  const mappings = loadMappings(options.mapFile);
+
+  if (mappings.length === 0) {
+    return fileInfo.source;
+  }
+
+  let changed = false;
+
+  const replaceInValue = (value) => {
+    if (typeof value !== 'string' || !value.includes('assets/')) return value;
+    let next = value;
+    for (const { oldPath, newPath } of mappings) {
+      if (next.includes(oldPath)) {
+        next = next.split(oldPath).join(newPath);
+      }
+    }
+    if (next !== value) changed = true;
+    return next;
+  };
+
+  root.find(j.Literal).forEach((p) => {
+    if (typeof p.node.value !== 'string') return;
+    p.node.value = replaceInValue(p.node.value);
+  });
+
+  if (j.StringLiteral) {
+    root.find(j.StringLiteral).forEach((p) => {
+      p.node.value = replaceInValue(p.node.value);
+    });
+  }
+
+  root.find(j.TemplateLiteral).forEach((p) => {
+    if (p.node.expressions.length > 0) return;
+    for (const quasi of p.node.quasis) {
+      const cooked = quasi.value && typeof quasi.value.cooked === 'string' ? quasi.value.cooked : null;
+      const raw = quasi.value && typeof quasi.value.raw === 'string' ? quasi.value.raw : null;
+      if (cooked != null) quasi.value.cooked = replaceInValue(cooked);
+      if (raw != null) quasi.value.raw = replaceInValue(raw);
+    }
+  });
+
+  if (!changed) return null;
+  return root.toSource({ quote: 'single' });
+};
+

package/codemods/transform.js

@@ -0,0 +1,136 @@
+/**
+ * jscodeshift transform for migrating impact-ui barrel imports to direct imports
+ *
+ * Usage:
+ *   npx jscodeshift -t ./codemods/transform.js ./src --extensions=tsx,ts,jsx,js
+ *
+ * Before:
+ *   import { Button, Input, Card } from 'impact-ui';
+ *   import { Button, Input, Card } from '@impactsmartsuite/impact-ui';
+ *
+ * After:
+ *   import { Button } from 'impact-ui/Button';
+ *   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();
+
+/**
+ * Main transformer function
+ * @param {object} fileInfo - Information about the file being transformed
+ * @param {object} api - jscodeshift API
+ * @param {object} options - Transform options
+ * @returns {string|null} - Transformed source or null if no changes
+ */
+module.exports = function transformer(fileInfo, api, options) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  let hasChanges = false;
+
+  root
+    .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;
+
+      const namedSpecifiers = specifiers.filter(
+        (s) => s.type === 'ImportSpecifier'
+      );
+      const defaultSpecifier = specifiers.find(
+        (s) => s.type === 'ImportDefaultSpecifier'
+      );
+      const namespaceSpecifier = specifiers.find(
+        (s) => s.type === 'ImportNamespaceSpecifier'
+      );
+
+      if (namespaceSpecifier) {
+        console.warn(
+          `Warning: Cannot migrate namespace import in ${fileInfo.path}. ` +
+            `Please manually update: import * as ... from "${barrelSource}"`
+        );
+        return;
+      }
+
+      if (namedSpecifiers.length === 0) {
+        return;
+      }
+
+      const groupedImports = {};
+      const unknownImports = [];
+
+      namedSpecifiers.forEach((spec) => {
+        const importedName = spec.imported.name;
+        const localName = spec.local.name;
+        const targetPath = exportLookup[importedName];
+
+        if (targetPath) {
+          if (!groupedImports[targetPath]) {
+            groupedImports[targetPath] = [];
+          }
+          groupedImports[targetPath].push({ importedName, localName });
+        } else {
+          unknownImports.push(spec);
+        }
+      });
+
+      const newImports = [];
+
+      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));
+          }
+          return j.importSpecifier(
+            j.identifier(importedName),
+            j.identifier(localName)
+          );
+        });
+        newImports.push(j.importDeclaration(newSpecifiers, j.literal(mappedPath)));
+      });
+
+      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 the package.'
+        );
+        newImports.push(
+          j.importDeclaration(unknownImports, j.literal(barrelSource))
+        );
+      }
+
+      if (defaultSpecifier) {
+        console.warn(
+          `Warning: Default import found in ${fileInfo.path}. ` +
+            'The library does not have a default export. Please check your import.'
+        );
+      }
+
+      if (newImports.length > 0) {
+        j(path).replaceWith(newImports);
+        hasChanges = true;
+      }
+    });
+
+  if (hasChanges) {
+    return root.toSource({
+      quote: 'single',
+      trailingComma: true,
+    });
+  }
+
+  return null;
+};
+
+module.exports.parser = 'tsx';

package/dist/components/Accordion/index.js

@@ -1,7 +1,8 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode(".impact_accordion_main_container{background:#eceefd;display:flex;flex-direction:column;flex-wrap:wrap;gap:0;gap:12px;width:100%}.impact_accordion_main_container .Mui-expanded{margin:0!important}.impact_accordion_main_container .accordion_main_container{border-bottom:1px solid #d4d4d4;border-radius:8px;box-shadow:none!important}.impact_accordion_main_container .accordion_main_container:before{opacity:0!important}.impact_accordion_main_container .accordion_main_container .accordion_header{display:flex!important;flex-direction:row-reverse;flex-grow:0!important;font-size:16px;gap:12px;height:48px;justify-content:flex-end!important;margin:0 16px!important;padding:0!important}.impact_accordion_main_container .accordion_main_container .accordion_header .MuiAccordionSummary-content{color:#0d152c;flex-grow:0!important;justify-content:flex-end}.impact_accordion_main_container .accordion_main_container .accordion_header .css-yw020d-MuiAccordionSummary-expandIconWrapper{align-items:center;background:#f5f6fa;border-radius:8px;height:32px;justify-content:center;transform:rotate(-90deg);width:32px}.impact_accordion_main_container .accordion_main_container .accordion_header .css-yw020d-MuiAccordionSummary-expandIconWrapper.Mui-expanded{transform:rotate(-180deg)}.impact_accordion_main_container .accordion_main_container .accordion_header.Mui-expanded{margin:0 16px!important;min-height:48px!important}.impact_accordion_main_container .accordion_main_container .accordion_body{color:#0d152c;padding:12px 16px!important}.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled{background-color:#fff}.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled .css-yw020d-MuiAccordionSummary-expandIconWrapper{background-color:#f8f9fb}.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled .MuiAccordionSummary-content,.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled .accordion_body{color:#b4bac7}.impact_accordion_main_container_single .accordion_main_container:last-child{border-radius:8px}.Mui-expanded.accordion_main_container{border:1px solid #eff2fa!important}.Mui-expanded.MuiAccordionSummary-content{font-weight:500}.accordion_main_container:focus{box-shadow:-3px 3px #eceefd,1px -1px 0 2px #eceefd!important}.impact_accordion_main_container .css-1086bdv-MuiPaper-root-MuiAccordion-root.Mui-expanded{margin:0!important}.accordions_white .impact_accordion_main_container{background:#fff}.impact_accordion_main_container .accordion_main_container{border:1px solid #eff2fa}.accordion_header .Mui-expanded{font-weight:600}")),document.head.appendChild(o)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/ExpandMore.js";
-/* 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";

package/dist/components/AccordionModern/index.js

@@ -1,9 +1,10 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode(".impact-accordion-modern-main-container{display:flex;flex-direction:column;gap:12px}.impact-modern-accordion-item{background-color:#fff;border:1px solid #eff2fa;border-radius:8px;display:flex;flex-direction:column;transition:border .2s ease}.impact-modern-accordion-item .impact-modern-accordion-header{align-items:center;display:flex;flex-direction:row;gap:12px;height:48px;padding:8px 16px;width:100%}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-drag-icon svg{color:#60697d;height:20px;margin-top:2px;width:20px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon{align-items:center;background-color:#f5f6fa;border-radius:8px;display:flex;height:32px;justify-content:center;padding:8px;transition:transform .2s ease-in-out;width:32px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon:hover{cursor:pointer}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon svg{fill:#60697d;height:20px;width:20px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-title{color:#0d152c;font-family:Manrope,sans-serif;font-size:14px;font-weight:600;line-height:21px;width:100%}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-title.child-count{align-items:center;display:flex;gap:12px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-title.disabled{color:#b4bac7}.impact-modern-accordion-item .impact-modern-accordion-content{box-sizing:border-box;color:#0d152c;font-family:Manrope,sans-serif!important;font-size:14px;font-weight:500;height:0;line-height:21px;opacity:0;overflow:hidden;padding:0 16px;transition:height .2s ease,padding .2s ease,opacity .2s ease;visibility:hidden}.impact-modern-accordion-item .expand-content{height:auto;opacity:1;padding:16px;visibility:visible}.impact-modern-accordion-container.disabled{cursor:not-allowed}.impact-modern-accordion-container.disabled .impact-modern-accordion-item .impact-modern-accordion-header{pointer-events:none}.impact-modern-accordion-container.disabled .impact-modern-accordion-item .impact-modern-accordion-drag-icon,.impact-modern-accordion-container.disabled .impact-modern-accordion-item .impact-modern-accordion-expand-icon{background-color:#f8f9fb}.expand-content-icon{transform:rotate(-90deg)}.expand-content-icon+.impact-modern-accordion-title{fill:#60697d;font-weight:800!important}.expand-content-icon+.impact-modern-accordion-title h3{font-weight:800}.impact-modern-accordion-container:not(.disabled) .impact-modern-accordion-item:focus{box-shadow:0 0 0 3px #eceefd;outline:none}.impact-modern-accordion-container:not(.disabled) .impact-modern-accordion-item:focus-visible{box-shadow:0 0 0 3px #eceefd;outline:none}.impact-modern-accordion-container.disabled .impact-modern-accordion-item:focus,.impact-modern-accordion-container.disabled .impact-modern-accordion-item:focus-visible{box-shadow:none;outline:none}")),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
 import { Badge } from "../Badge/index.js";
 import { SortableAccordionList } from "./SortableAccordionComp.js";
-/* empty css                            */
+
 function AccordionModern({
   draggable = false,
   expanded,